React compound components
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