Theming

Overview

ThemingNPM is a CSS-in-JS theming solution for React. It provides a ThemeProvider component to pass, update, merge and augment themes through context down the React tree. The withTheme component allows receiving themes and their updates in components as a theme prop. The createTheming component allows integrating theming into CSS-in-JS libraries with a custom context.

Features

• ThemeProvider: Passes and updates themes through context down the React tree.
• withTheme: Maps context to theme prop in components.
• createTheming: Integrates theming into CSS-in-JS libraries with a custom context.

Installation

To use ThemingNPM in your React components, follow these steps:

1. Install the package using NPM:

npm install theming

2. Import the ThemeProvider, withTheme, and createTheming components into your project:

import { ThemeProvider, withTheme, createTheming } from 'theming';

3. Use the ThemeProvider component to wrap your top-level component and provide the theme:

<ThemeProvider theme={yourTheme}>
  {/* Your app components */}
</ThemeProvider>

4. Use the withTheme higher-order component to receive the theme and its updates in your components as a theme prop:

const MyComponent = ({ theme }) => {
  // Use the theme object
  return (
    {/* Your component JSX */}
  );
};

export default withTheme(MyComponent);

5. (Optional) Use the createTheming component to integrate theming into your CSS-in-JS library with a custom context:

import { createTheming } from 'theming';

const yourTheming = createTheming(customContext);

export default yourTheming;

Summary

ThemingNPM is a theming solution for React that enables seamless theming in applications. It provides the ThemeProvider component to pass and update themes through context, the withTheme component to receive themes in components, and the createTheming component to integrate theming into CSS-in-JS libraries. By using ThemingNPM, developers can easily implement and manage themes in their React applications.