Быстрое создание многократно используемых компонентов React в одну строку

🔴 Традиционно вы извлекаете многократно используемый элемент в функциональный компонент.

function Button(props) {
    return (
        <button {...props} className={"inline-flex font:14" + (props.className ? ' ' + props.className : '')}>
            {props.children}
        </button>
    )
}
Вход в полноэкранный режим Выход из полноэкранного режима

А теперь реализуйте то же самое в одной строке, используя на ~80% меньше кода.

const Button = el.button`inline-flex font:14`
Вход в полноэкранный режим Выйти из полноэкранного режима

затем примените его как обычно:

export default function App() {
    return (
        <Button className="uppercase">submit</Button>
    )
}
Войти в полноэкранный режим Выйти из полноэкранного режима

будет отображаться как:

<button class="inline-flex font:14 uppercase">submit</button>
Войти в полноэкранный режим Выход из полноэкранного режима
На этой странице
  • Особенности
  • Установить
  • Импортировать
  • Использование
    • Создайте базовый стилизованный элемент
    • Применение дополнительных имен классов
    • Применять имена классов на основе свойств
    • Преобразование имен тегов
    • Расширение стилизованных элементов
  • Вдохновение
  • Связанные

Особенности

  • Стилевые элементы, управляемые именами классов.
  • Быстрое создание многократно используемых стилизованных элементов.
  • Создание стилизованных элементов с меньшим количеством кода.
  • Расширение существующих стилизованных элементов.
  • Условное построение имен классов и строк с помощью шаблонных литералов.

Установите

npm install @master/style-element.react
Вход в полноэкранный режим Выйти из полноэкранного режима

Импортировать

import el from '@master/style-element.react';
Войти в полноэкранный режим Выйти из полноэкранного режима

Использование

Упростите и ускорьте реализацию функциональных компонентов с помощью синтаксического сахара.

Создание базового стилизованного элемента

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>
    )
}
Войти в полноэкранный режим Выйти из полноэкранного режима

отображается как:

<button class="inline-flex font:14">...</button>
Войти в полноэкранный режим Выход из полноэкранного режима

Примените дополнительные имена классов

Добавьте uppercase для кнопки здесь.

const Button = el.button`inline-flex font:14`

return (
    <Button className="uppercase">...</Button>
)
Войти в полноэкранный режим Выйти из полноэкранного режима

отображается как:

<button class="inline-flex font:14 uppercase">...</button>
Войти в полноэкранный режим Выход из полноэкранного режима

Применение имен классов на основе свойств

const Button = el.button`
    inline-flex
    font:14
    ${(props) => (props.color ? 'font:white bg:' + props.color : '')}
`

return (
    <Button color="blue">...</Button>
    <Button color="red">...</Button>
    <Button disabled>...</Button>
)
Войти в полноэкранный режим Выход из полноэкранного режима

отображается как:

<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>
Войти в полноэкранный режим Выход из полноэкранного режима

Преобразование имен тегов

Если вы просто хотите преобразовать имя тега стилизованного элемента, оставьте » пустым.

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>
)
Войти в полноэкранный режим Выйти из полноэкранного режима

отображается как:

<button class="inline-flex font:14">Button</button>
<a class="inline-flex font:14" href="https://css.master.co" target="blank">Anchor</a>
Войти в полноэкранный режим Выход из полноэкранного режима

⚠️ Цель для преобразования принимает только стилизованные элементы.

Расширить стилизованные элементы

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>
)
Войти в полноэкранный режим Выйти из полноэкранного режима

отображается как:

<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>
Войти в полноэкранный режим Выход из полноэкранного режима

⚠️ Цель для расширения принимает только стилизованные элементы.

Вдохновение

Некоторые из наших основных концепций и дизайнов вдохновлены этими гигантами.

  • Template Literal — использование литералов шаблонов в качестве синтаксического сахара для повторного использования компонентов вдохновлено Styled Components.

Связанный

  • @master/css — Виртуальный язык CSS с улучшенным синтаксисом. ~13 КБ
  • @master/literal — Условное построение имен классов и строк с помощью шаблонных литералов. ~600B

Нажмите ⭐️ звезду на GitHub! Если вам это нравится.

Оцените статью
devanswers.ru
Добавить комментарий