Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Shared configuration across application / all react-switch instances? #120

Open
cotwitch opened this issue Jan 16, 2023 · 0 comments
Open

Comments

@cotwitch
Copy link

@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).)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant