elamandeep / style-element.react

Quickly create reusable React elements driven by class names. ~800B

@master/style-element.react

Quickly create reusable React elements driven by class names. ~800B

🔴 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
• Install
• Import
• Usage
  • Create a basic styled element
  • Apply additional class names
  • Apply class names based on properties
  • Transform tag names
  • Extend styled elements
• Related
• Inspiration

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>

⚠️ Extended sources only accept styled elements.

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>

⚠️ Extended sources only accept styled elements.

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.