react-switch icon indicating copy to clipboard operation
react-switch copied to clipboard

Shared configuration across application / all react-switch instances?

Open cotwitch opened this issue 1 year ago • 0 comments

@markusenglund Firstly, let me thank you for your great work, I really appreciate it ;)

Anyway, I would like to kindly ask you, is it possible to (globally?!) share react-switch (visual) configuration across the whole application / all react-switch instances?

Specifically, I mean offColor, onColor, offHandleColor, onHandleColor, handleDiameter, uncheckedIcon, checkedIcon, uncheckedHandleIcon, checkedHandleIcon, boxShadow, activeBoxShadow, height, width, className and borderRadius properties.

Only idea, which comes to my mind is to create a JS file exporting object (or a simple JSON) with pre-defined static values.

react-switch.config.js

export default {
  onColor: "#3564EF",
  offColor: "#8D8CA3",
  ...
}

Then import that object on each place where react-switch is used ...

import Switch from "react-switch"
import switchConfiguration from "../lib/react-switch.config"

... and spread that object to its props:

<Switch {...switchConfiguration} />

Great thing is that you could use that config object as a "template" and if you need, you could simply overload config object properties by placing new props after the spread.

<Switch {...switchConfiguration} onColor="#f00" />

But this requires additional import of configuration in component/page. And that's what I would like to avoid.

So, is there anything, which could configure react-switch globally, without any imports, "automagically"? 🎩 🐰

(Footnote: Typically, I would solve this via some global CSS. But as far as I know and if I understood it well, CSS is not much supported by this component (except strong !important usage).)

cotwitch avatar Jan 16 '23 19:01 cotwitch