macro components Скачать - скачать macro components Скачать исходный код

макрокомпоненты

Создайте гибкую компоновку и композитные компоненты пользовательского интерфейса без необходимости определения произвольных пользовательских реквизитов.

 npm i macro-components

 import React from 'react'
import styled from 'styled-components'
import Macro from 'macro-components'
import { space , fontSize , color } from 'styled-system'

// Define some styled-components
const Box = styled . div ` ${ space } ${ fontSize } ${ color } `
Box . displayName = 'Box'

const Image = styled . img `
  max-width: 100%;
  height: auto;
  ${ space }
`
Image . displayName = 'Image'

const Heading = styled . h2 ` ${ space } ${ fontSize } ${ color } `
Heading . displayName = 'Heading'

const Text = styled . div ` ${ space } ${ fontSize } ${ color } `
Text . displayName = 'Text'

// create a macro function with the UI components you intend to use
const macro = Macro ( {
  Image ,
  Heading ,
  Text
} )

// Create a macro-component
const MediaObject = macro ( ( {
  Image ,
  Heading ,
  Text
} ) => (
  < Flex p = { 2 } align = 'center' >
    < Box width = { 128 } >
      { Image }
    </ Box >
    < Box >
      { Heading }
      { Text }
    </ Box >
  </ Flex >
) )

 import MediaObject from './MediaObject'

// get the macro component's child components
const { Image , Heading , Text } = MediaObject

// Use the macro-component by passing the components as children
const App = props => (
  < div >
    < MediaObject >
      < Image src = 'kitten.png' />
      < Heading >
        Hello
      </ Heading >
      < Text >
        This component keeps its tree structure but still allows for regular composition.
      </ Text >
    </ MediaObject >
  </ div >
)

Функции

Создатель единого компонента
Предназначен для использования с такими библиотеками, как Styled-Components и гламурные
Инкапсулировать структуру макета в компоненты
Помогите минимально сохранить площадь поверхности API компонента API
Работает с любыми другими компонентами React

ПРИМЕЧАНИЕ. Макро компоненты предназначены для работы только с конкретными дочерними компонентами. Если вы хотите определить слоты , см. Раздел альтернативы ниже.

Мотивация

Часто лучше всего использовать композицию React и props.children для создания пользовательского интерфейса, который состоит из нескольких элементов, но иногда вы можете создать более крупные компоненты составных компонентов с инкапсулированными структурами деревьев для макета или создания компонентов пользовательского интерфейса, похожих на начальную загрузку, такие как панели, карты или предупреждения. Эта библиотека позволяет создавать композитные компоненты с инкапсулированными структурами DOM без необходимости определения произвольных API -интерфейсов и которые работают так же, как и любой другой композицию реагирования.

Это может помочь гарантировать, что площадь поверхности вашего компонента API остается небольшой и проще в обслуживании.

Если вы обнаружите, что создаете композитные компоненты React, которые не сопоставляются со структурами данных, как описано в «Мышлении в React», то этот модуль предназначен для вас.

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

Macro(componentsObject)(elementFunction)

Возвращает компонент React с композиционным API, который сохраняет структуру макета дерева.

 const Banner = Macro ( {
  // pass a components object
  Heading ,
  Subhead
} ) ( ( {
  // the element function receives child elements
  // named according to the components object
  Heading ,
  Subhead
} ) => (
  < Box p = { 3 } color = 'white' bg = 'blue' >
    { Heading }
    { Subhead }
  </ Box >
)

Аргумент elementFunction вызывается с объектом элементов, основанного на componentsObject , передаваемом макрофункту. Использование компонента баннера выше будет выглядеть примерно как следующее.

 import Banner from './Banner'

const App = ( ) => (
  < Banner >
    < Banner . Heading > Hello </ Banner . Heading >
    < Banner . Subhead > Subhead </ Banner . Subhead >
  </ Banner >
)

ComponentsObject

Объект компонентов используется для определения того, какие компоненты макрокомпонент примет в качестве детей.

элементная функция

Элементная функция аналогична компоненту React, но получает объект элементов в качестве своего первого аргумента и реквизита в качестве его второго. Объект элементов создается от его детей и предназначен для облегчения инкапсулирующей композиции и элементных структур.

Внутри макросопонента элементная функция вызывается с объектом Elements и реквизитом: elementFunction(elementsObject, props) .

 // example
const elFunc = ( { Heading , Text , } , props ) => (
  < header >
    { Heading }
    { Text }
  </ header >
)

const Heading = styled . h2 ``
const Text = styled . div ``

const componentsObj = {
  Heading ,
  Text
}

const SectionHeader = Macro ( componentsObj ) ( elFunc )

Опустив детей

Для любого элемента, не передаваемого в детстве для макросопонента, элементная функция сделает undefined , а реагирование не будет производить этот элемент. Это полезно для условного пропуска дополнительных детей

 const macro = Macro ( { Icon , Text , CloseButton } )

const Message = macro ( {
  Icon ,
  Text ,
  CloseButton
} ) = > (
  < Flex p = { 2 } bg = 'lightYellow' >
    { Icon }
    { Text }
    < Box mx = 'auto' />
    { CloseButton }
  </ Flex >
)

 import Message from './Message'

const { Text , CloseButton } = Message

// Omitting the Icon child element will render Message without an icon.
const message = (
  < Message >
    < Text > { props . message } </ Text >
    < CloseButton
      onClick = { props . dismissMessage }
    />
  </ Message >
)

Реквизит перешел в корневой компонент

Второй аргумент, переданный функции элемента, позволяет вам передавать реквизиты в корневой элемент или любой другой элемент в компоненте.

 const macro = Macro ( { Image , Text } )

const Card = macro ( ( {
  Image ,
  Text
} , props ) => (
  < Box p = { 2 } bg = { props . bg } >
    { Image }
    { Text }
  </ Box >
) )

 // example usage
< Card bg = 'tomato' >
  < Card . Image src = 'kittens.png' />
  < Card . Text > Meow </ Card . Text >
</ Card >

Клон компонент

Чтобы применить реквизиты по умолчанию к элементам, передаваемым в качестве детей, используйте компонент клона в функции элемента.

 import Macro , { Clone } from 'macro-components'
import { Heading , Text } from './ui'

const macro = Macro ( { Heading , Text } )

const Header = macro ( ( { Heading , Text } ) => (
  < Box p = { 2 } >
    < Clone
      element = { Heading }
      fontSize = { 6 }
      mb = { 2 }
    />
    < Clone
      element = { Text }
      fontSize = { 3 }
    />
  </ Box >
) )

Используя компонент несколько раз

Чтобы использовать один и тот же компонент дважды, дайте ему уникальный ключ в ComponentsObject.

 import React from 'react'
import Macro from 'macro-components'
import { Heading } from './ui'

const macro = Macro ( {
  Heading : Heading ,
  Subhead : Heading
} )

const Header = macro ( ( { Heading , Subhead } ) => (
  < Box p = { 2 } >
    { Heading }
    { Subhead }
  </ Box >
) )

 < Header >
  < Header . Heading > Hello </ Header . Heading >
  < Header . Subhead > Subhead </ Header . Subhead >
</ Header >

Альтернативы

Создание компонентов макета, которые не связаны с конкретными дочерними компонентами, с использованием реквизита или упорядоченных детей, вероятно, является более простым подходом.

Решения, приведенные ниже, позволяют вам передавать любые произвольные компоненты в качестве реквизита или детей.

Смотрите эту дискуссию для большего.

 // using custom props
const MyLayout = ( {
  left ,
  right
} ) => (
  < Flex >
    < Box width = { 128 } >
      { left }
    </ Box >
    < Box width = { 1 } >
      { right }
    </ Box >
  </ Flex >
)

< MyLayout
  left = { (
    < Image src = 'kitten.png' />
  ) }
  right = { (
    < Text > Meow </ Text >
  ) }
/ >

 // using ordered children
const Header = props => {
  const [ first , second ] = React . Children . toArray ( props . children )
  return (
    < Box p = { 3 } >
      { first }
      { second }
    </ Box >
  )
}

< Header >
  < Heading > First </ Heading >
  < Text > Second < / Text>
</ Header >

 // using a children object
const Header = ( {
  children : {
    left ,
    right
  }
} ) => (
  < Flex >
    < Box >
      { left }
    </ Box >
    < Box width = { 1 } >
      { right }
    </ Box >
  </ Flex >
)

< Header >
  { {
    left : (
      < Image src = 'kitten.png' />
    ) ,
    right : (
      < Text > Meow </ Text >
    )
  } }
</ Header >