react-switch
react-switch copied to clipboard
Shared configuration across application / all react-switch instances?
@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).)