/

React compound components

https://jjenzz.com/compound-components
reactjs
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
Want to make your own site like this?
Try gatsby-theme-code-notes by Zander Martineau.
Notes on code. My second brain, by Zander Martineau.