Search code examples
reactjstypescriptcomponents

Making a component library with dynamic color variants in React

I want to make a component library in React and make it possible to specify which color variants you want to have.

For example:

const theme = createTheme({
    button: {
        variants: {
            primary: 'primary',
            secondary: 'secondary',
            danger: 'danger'
        }
    }
})

// later
<ComponentLibraryProvider theme={theme}>
    <App/>
</ComponentLibraryProvider>

// And now I want to be able to have TypeScript typings working on variant attribute (without .d.ts file generation like in Prisma ORM)
import { Button } from 'componentLibrary'

<Button variant="primary">Send</Button>

Is there any way to do that?

Solution

  • You may want to check out styled-system. It basically accomplishes that, and more.