🔴 Traditionally, you would extract a reusable element into a functional component.
function Button(props) {
return (
<button {...props} className={"inline-flex font:14" + (props.className ? ' ' + props.className : '')}>
{props.children}
</button>
)
}
🟢 Now, implement the same in one line with ~80% code less
const Button = el.button`inline-flex font:14`
then apply it as usual:
export default function App() {
return (
<Button className="uppercase">submit</Button>
)
}
will be rendered as:
<button class="inline-flex font:14 uppercase">submit</button>
On this page
Features
- Styled elements driven by class names.
- Quickly create reusable styled elements.
- Create styled elements with less code.
- Extend existing styled elements.
- Conditionally construct class names and strings with template literals.
Install
npm install @master/style-element.react
Import
import el from '@master/style-element.react';
Usage
Make it easier and faster to implement functional components using syntactic sugar.
Create a basic styled element
import React from 'react'
import el from '@master/style-element.react'
const Button = el.button`inline-flex font:14`
export default function App() {
return (
<Button>...</Button>
)
}
rendered as:
<button class="inline-flex font:14">...</button>
Apply additional class names
Add uppercase
for the button here.
const Button = el.button`inline-flex font:14`
return (
<Button className="uppercase">...</Button>
)
rendered as:
<button class="inline-flex font:14 uppercase">...</button>
Apply class names based on properties
If the custom property name isn't the part of the element, you must prefix it with $
to prevent it from being reflected to the element's attribute or getting type errors.
const Button = el.button`
inline-flex
font:14
${({$color}) => $color && `font:white bg:${$color}`)}
`
return (
<Button $color="blue">...</Button>
<Button $color="red">...</Button>
<Button disabled>...</Button>
)
rendered as:
<button class="inline-flex font:14 font:white bg:blue">...</button>
<button class="inline-flex font:14 font:white bg:red">...</button>
<button class="inline-flex font:14" disabled>...</button>
Transform tag names
If you just want to transform a styled element tag name, leave `` empty.
const Button = el.button`inline-flex font:14` // <button>
const Anchor = el.a(Button)`` // <button> -> <a>
return (
<Button>Button</Button>
<Anchor href="https://css.master.co" target="blank">Anchor</Anchor>
)
rendered as:
<button class="inline-flex font:14">Button</button>
<a class="inline-flex font:14" href="https://css.master.co" target="blank">Anchor</a>
Extend styled elements
const Button = el.button`inline-flex font:14`
// extend Button with addtional class names
const Button1 = el(Button)`text:center`
// extend Button with addtional class names and transform it into <a>
const Button2 = el.a(Button)`italic`
// extend Button1 and Button2 with addtional class names
const Button3 = el(Button1)(Button2)`font:bold`
return (
<Button>Button</Button>
<Button1>Button 1</Button1>
<Button2>Button 2</Button2>
<Button3>Button 3</Button3>
)
rendered as:
<button class="inline-flex font:14">Button</button>
<button class="inline-flex font:14 text:center">Button 1</button>
<a class="inline-flex font:14 italic">Button 2</a>
<button class="inline-flex font:14 text:center italic font:bold">Button 3</button>
Related
- @master/css - A Virtual CSS language with enhanced syntax. ~13KB
- @master/literal - Conditionally construct class names and strings with template literals. ~600B
Inspiration
Some of our core concepts and designs are inspired by these giants.
- Template Literal - The use of template literals as syntactic sugar for reusing components is inspired by Styled Components.