npm

theme-tweaker
TypeScript icon, indicating that this package has built-in type declarations

1.1.1 • Public • Published

theme-tweaker

Use to develop your Theme object dynamically

NPM JavaScript Style Guide

Install

npm install --save theme-tweaker

Usage

Basic Example

// index.tsx
import './index.css'

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
import {createThemeTweaker} from 'theme-tweaker'

export type Theme = {my: string};
const theme: Theme = {my: 'theme'};

const Provider = createThemeTweaker();

ReactDOM.render(
    <Provider theme={theme}>
        <App />
    </Provider>
, document.getElementById('root'))

Using a third party library (Material UI for example)

Pass that library theme provider to the createThemeTweaker function and use the returned Provider the same way.

// index.tsx
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import {theme} from './theme/theme';
import MuiProvider from '@material-ui/styles/ThemeProvider';
import { createThemeTweaker } from './theme/themeTweaker/themeTweaker';

const isDev = process.env.NODE_ENV === "development";

const ThemeProvider = isDev ? createThemeTweaker(MuiProvider) : MuiProvider; 

ReactDOM.render(
    <ThemeProvider theme={theme}>
        <App />
    </ThemeProvider>
,
  document.getElementById('root')
);

Modifying your theme from a component

import {useThemeTweaker} from 'theme-tweaker';
import React from 'react';
import {Theme} from './index';

const App = () => {
  const {theme, setThemeProp} = useThemeTweaker<Theme>();
  
  return (
    <div>
      <button onClick={() => setThemeProp("my", "edited theme")}>Change</button>
      {JSON.stringify(theme)}
    </div>
  );
}

export default App

License

MIT © guygolanIL

Versions

Current Tags

VersionDownloads (Last 7 Days)Tag
1.1.10latest

Version History

VersionDownloads (Last 7 Days)Published
1.1.10
1.1.00
1.0.00

Package Sidebar

Install

npm i theme-tweaker

Weekly Downloads

0

Version

1.1.1

License

MIT

Unpacked Size

29.3 kB

Total Files

8

Last publish

Collaborators

  • guygolanil