macro components

macro-componentes

Cree un diseño flexible y componentes de interfaz de usuario compuestos sin la necesidad de definir accesorios personalizados arbitrarios.

 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 >
) 

Características

• Creador de un solo componente
• Destinado a su uso con bibliotecas como componentes de estilo y glamoroso
• Estructura de diseño encapsular en componentes compuestos
• Ayude a mantener su área de superficie API de componente al mínimo
• Funciona con cualquier otro componente React

NOTA: Los componentes macro están destinados a trabajar solo con componentes infantiles específicos. Si desea definir espacios , consulte la sección de alternativas a continuación.

Motivación

A menudo, es mejor usar la composición React y props.children para crear UI que se compone de múltiples elementos, pero a veces es posible que desee crear componentes compuestos más grandes con estructuras de árboles encapsuladas para el diseño o crear componentes de UI similares a botas, como paneles, tarjetas o alertas. Esta biblioteca le permite crear componentes compuestos con estructuras DOM encapsuladas sin la necesidad de definir API de accesorios arbitrarios y que funcionan como cualquier otra composición de reaccionamiento.

Esto puede ayudar a garantizar que el área de superficie de su componente API siga siendo pequeña y más fácil de mantener.

Si se encuentra creando componentes React Composite que no se asignan a las estructuras de datos, como se describe en el pensamiento en React, entonces este módulo está destinado a usted.

Uso

Macro(componentsObject)(elementFunction)

Devuelve un componente React con una API compuesta que mantiene la estructura de diseño del árbol.

 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 >
)

El argumento elementFunction se llama con un objeto de elementos basado en el componentsObject Passed a la función macro. Usar el componente banner anterior se parecería a lo siguiente.

 import Banner from './Banner'

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

componente

El objeto de componentes se usa para definir qué componentes aceptará el componente macro como niños.

elemento

La función del elemento es similar a un componente React, pero recibe un objeto de elementos como su primer argumento y accesorios como su segundo. El objeto Elements se crea a partir de sus hijos y está destinado a facilitar la composición de la encapsulación y las estructuras de elementos.

Dentro del componente macro, la función del elemento se llama con el objeto de elementos y los accesorios: 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 )

Omitir a los niños

Para cualquier elemento que no pase de niño al componente macro, la función del elemento dejará undefined y reaccionará no representará ese elemento. Esto es útil para omitir condicionalmente niños opcionales

 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 >
)

Los accesorios pasaron al componente raíz

El segundo argumento pasado a la función del elemento le permite pasar accesorios al elemento raíz o cualquier otro elemento dentro del componente.

 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 >

Componente clon

Para aplicar accesorios predeterminados a los elementos pasados en niños, use el componente clon en una función de elemento.

 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 >
) )

Usando un componente varias veces

Para usar el mismo componente dos veces, dale una clave única en ComponentObject.

 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 >

---

Alternativas

Crear componentes de diseño que no se acoplen a componentes infantiles específicos, usar accesorios o niños ordenados es probablemente un enfoque más simple.

Las siguientes soluciones le permiten pasar cualquier componente arbitrario como accesorios o niños.

Vea esta discusión para más.

 // 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 > 

---

Relacionado

• componentes con estilo
• atractivo
• emoción
• sistema de estilo
• componentes del sistema
• Ejemplo de MediaObject basado en: El objeto de medios guarda cientos de líneas de código

Licencia de MIT