https://github.com/dominictobias/react-js2css-theme
Expose theme objects but use CSS Variables internally
https://github.com/dominictobias/react-js2css-theme
Last synced: about 1 month ago
JSON representation
Expose theme objects but use CSS Variables internally
- Host: GitHub
- URL: https://github.com/dominictobias/react-js2css-theme
- Owner: dominictobias
- Created: 2020-01-30T11:48:48.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-05T06:04:03.000Z (over 2 years ago)
- Last Synced: 2025-03-10T19:57:46.151Z (about 1 month ago)
- Language: JavaScript
- Size: 355 KB
- Stars: 7
- Watchers: 2
- Forks: 0
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React CSS Theming (with JS objects)
This tiny 500byte (not gzipped) component allows JS theme objects to be passed into your component where they're converted into CSS Variables for internal use.
Demo
https://codesandbox.io/s/react-js2css-theme-demo-s6xlx
Why?
- Switching CSS Variables for themes is unpleasant for users of your component, JS objects are easier to deal with.
- CSS Variable changes are much faster than React re-renders via Context which is what CSS-in-JS solutions do.
- If you care about performance and bundle size and want to avoid CSS-in-JS solutions altogether you can still provide a nice JS theme object interface to your users.
## Install
```
yarn add react-js2css-theme
```
Usage
```js
const yourTheme = {
background: 'black',
textColor: 'white',
fontFamily: '"Roboto", sans-serif',
fontWeight: 500,
button: {
padding: '10px',
},
};
```
As a component
```js
import JSToCSSTheme from 'react-js2css-theme';
;
```
As a hook
You may not wish to create an extra wrapping element, in this case you can use the hook:
```js
import { useJsToCss } from 'react-js2css-theme';
function YourComponent() {
const themeStyle = useJsToCss('xx', yourTheme);
return (
{themeStyle}
{/* ... your component JSX */}
);
}
```
Your component can now make use of the following CSS Variables:
```css
:root {
--xx-background: black;
--xx-textColor: white;
--xx-fontFamily: 'Roboto', sans-serif;
--xx-fontWeight: 500;
--xx-buttonPadding: 10px;
}
```
Now try changing the theme object and watch your component's theme change :)
Requirements
- All browsers except IE