React Theme Overlay

This package adds an overlay that recursively parses your theme object, and gives a better presentation.

Sorting

Elements in the node of your theme are being sorted by default to primitive valued pairs to be first in the stack, and object like node to be lower. ! Avoid using numeric keys to sorting to work. If you don't have such an opportunity, nothing breaks, but the tree gets slightly ugly :D

Getting started

# Install the package 
$ yarn add @askarovich/react-theme-overlay

Then add in your index file, or wherever you would like, passing your theme file to props.

import { ThemeOverlay } from '@askarovich/react-theme-overlay';

const theme = {
    primaryBlue: 'blue',
    someGroup: {
        warning: 'orange'
    },
    // Non color values also supported
    spacings: {
        large: '24px',
        little: '12em'
    }
};
const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
    <App />
    ...
    {process.env.NODE_ENV === 'development' && <ThemeOverlay theme={theme} />}
  </React.StrictMode>
);

Contrubition

Feel free to contribute at [https://gitlab.com/soundsnick/react-theme-overlay]. Please, keep a package tiny, since this is just an instrument built to help development.