React compound components

https://jjenzz.com/compound-componentsApril 22, 2021

tsx

import React, { useContext } from 'react'

const Context = React.createContext()

const List = ({ isSmall = false, children, ...props }) => (
  <ul {...props} style={{ padding: isSmall ? '5px' : '10px' }}>
    <Context.Provider value={isSmall}>{children}</Context.Provider>
  </ul>
)

const ListItem = ({ children, ...props }) => {
  const isSmall = useContext(Context)

  return (
    <li {...props} style={{ padding: isSmall ? '5px' : '10px' }}>
      {children}
    </li>
  )
}

export { List, ListItem }

tsx

<List isSmall>
  <ListItem>Cat</ListItem>
  <ListItem>Dog</ListItem>
</List>

Another example: egghead.io/lessons/...mponents

Edit this page