children-props

children-props

Easily set props of children components.

Usage

assign

import { assign } from 'children-props'

const Container = props => <div {...props}/>
const Title = props => <h1 {...props}/>
const Content = props => <p {...props}/>

const CustomContainer = ({ childrenProps, ...props }) => {
  const {
    Content: contentProps,
    Title: titleProps
  } = assign(childrenProps, {
    Title: props => ({ /* Access props set on component */
      className: `container__title ${props.className}`,
      id: 'title'
    }),
    Content: {
      id: 'content'
    }
  })

  return (
    <Container {...props}>
      <Title {...titleProps}>
        Title
      </Title>
      <Content {...contentProps}>
        Lorem ipsum
      </Content>
    </Container>
  )
}

export default () => (
  <CustomContainer className='custom__container' childrenProps={{
    Title: { className: 'custom__title' },
    Content: { className: 'custom__content', id: 'custom' }
  }}/>
)

{/* The export above is the same as the following:
  <Container className='custom__container'>
    <Title className='container__title custom__title' id='title'>
      Title
    </Title>
    <Content className='custom__content' id='custom'>
      Lorem ipsum
    </Content>
  </Container>
*/}

get

import { get } from 'children-props'

const Container = props => <div {...props}/>
const Title = props => <h1 {...props}/>
const Content = props => <p {...props}/>

const CustomContainer = ({ childrenProps, ...props }) => (
  <Container {...props}>
    <Title {...get(childrenProps, 'Title')}>
      Title
    </Title>
    <Content {...get(childrenProps, 'Content', { id: 'content' })}>
      Lorem ipsum
    </Content>
  </Container>
)

export default () => (
  <CustomContainer className='custom__container' childrenProps={{
    Title: { className: 'custom__title' },
    Content: { className: 'custom__content', id: 'custom' }
  }}/>
)

{/* The export above is the same as the following:
  <Container className='custom__container'>
    <Title className='container__title custom__title'>
      Title
    </Title>
    <Content className='custom__content' id='custom'>
      Lorem ipsum
    </Content>
  </Container>
*/}

Helpers

extend

import { extend } from 'children-props'

const Container = props => <div {...props}/>
const Title = props => <h1 {...props}/>
const Content = props => <p {...props}/>

const CustomContainer = ({ childrenProps, ...props }) => {
  childrenProps = extend(childrenProps)

  const {
    Title: titleProps
  } = childrenProps.assign({
    Title: props => ({ /* Access props set on component */
      className: `container__title ${props.className}`,
      id: 'title'
    })
  })

  return (
    <Container {...props}>
      <Title {...titleProps}>
        Title
      </Title>
      <Content {...childrenProps.get('Content', { id: 'content' })}>
        Lorem ipsum
      </Content>
    </Container>
  )
}

export default () => (
  <CustomContainer className='custom__container' childrenProps={{
    Title: { className: 'custom__title' },
    Content: { className: 'custom__content', id: 'custom' }
  }}/>
)

{/* The export above is the same as the following:
  <Container className='custom__container'>
    <Title className='container__title custom__title' id='title'>
      Title
    </Title>
    <Content className='custom__content' id='custom'>
      Lorem ipsum
    </Content>
  </Container>
*/}

HOC

import childrenProps from 'children-props'

const Container = props => <div {...props}/>
const Title = props => <h1 {...props}/>
const Content = props => <p {...props}/>

const CustomContainer = childrenProps(({ childrenProps, ...props }) => {
  const {
    Title: titleProps
  } = childrenProps.assign({
    Title: props => ({ /* Access props set on component */
      className: `container__title ${props.className}`,
      id: 'title'
    })
  })

  return (
    <Container {...props}>
      <Title {...titleProps}>
        Title
      </Title>
      <Content {...childrenProps.get('Content', { id: 'content' })}>
        Lorem ipsum
      </Content>
    </Container>
  )
})

export default () => (
  <CustomContainer className='custom__container' childrenProps={{
    Title: { className: 'custom__title' },
    Content: { className: 'custom__content', id: 'custom' }
  }}/>
)

{/* The export above is the same as the following:
  <Container className='custom__container'>
    <Title className='container__title custom__title' id='title'>
      Title
    </Title>
    <Content className='custom__content' id='custom'>
      Lorem ipsum
    </Content>
  </Container>
*/}