'Best practice for configurable React component/component library

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?

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'Best practice for configurable React component/component library

Sources

Related Questions