8

I've created an UI JS library, package.json is fine, I bundle it with webpack and it works great in npm (stays nicely in node_modules/library dir).

However, I'd like to make some stuff configurable via config file. Let's say, my library has a Box React component (it renders 100x100 square with background color):

// Box.js
export default function(props) {
   return <div style={{
       backgroundColor: props.color,
       width: "100px",
       height: "100px"
   }}>
       {props.children}
   </div>;
}

I'd like to provide a possibility to add a configuration file so that the background color is users choice color by default.

So user of my library creates a config file (let's call it library.config.js) in a root directory of his project and this file has sth like this:

// library.config.js
const BoxBackgroundColor = 'green';
export { BoxBackgroundColor }

And if this file exist, the lib knows this and user can simply use Box like this:

<Box />

and color prop will be green.

How to achieve sth like this?

The problem is that when I bundle my library I don't know if library.config.js file exists or not. This information is available for user of my library in user's project. It seems I want to resolve all import and require statements in my library except for the library.config.js. This exception require should be resolved in user's project bundling phase (when library.config.js file is available).

Andrzej Dąbrowski
  • 1,159
  • 11
  • 14

0 Answers0