Best practice for configurable React component/component library

174 Views Asked by At

I'm working on a React component library and I'm trying to figure out what would be the best way to make it configurable.

I'd want to achieve something similar to TailwindCSS, where you can run an npx script:

npx my-library init

which creates a configuration file in the project dir. The developer would then be able to change up that configuration, include design tokens for their brand, etc.

E.g.:

// config.js
module.exports = {
    tokens: {
        "Teal/800": {
            "value": "#34a99a",
            "type": "color"
        },
        "Cyan/400": {
            "value": "#1f4e61",
            "type": "color"
        },
        "Cyan/500": {
            "value": "#246277",
            "type": "color"
        }
    },
    footerCompanyUrl: "https://example.com",
    brandFontStack: ['Nunito Sans', 'Inter'],
    openLinksInNewTab: true
}

Once the developer has decided on their configuration, they would run npm run build, which would run a script that rebuilds the components and/or their styles, taking into account the values defined in the configuration file.

How could I achieve something like this?

0

There are 0 best solutions below