2

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?

Chris Yalamov
  • 80
  • 2
  • 7
  • did you find out how to achieve this? – Jonathan Laliberte Feb 21 '23 at 18:35
  • @JonathanLaliberte After doing some digging, I ended up going for CSS-in-JS libraries instead (like Styled Components, Emotion, styledJSX). As for generating the actual configuration, I think that can be a simple script with node [fs](https://nodejs.org/api/fs.html). You could then import this into your file and reference values using CSS-in-JS. – Chris Yalamov Mar 09 '23 at 15:49

0 Answers0