React Themeit

Overview:

themeit is a tool that makes it easy to create and use different themes for react components while using CSS Modules or JS style objects. It is built with code splitting in mind, allowing you to load only the themes you need at a time. It also supports the use of JS style objects for themes, which are automatically processed with aphrodite.

Features:

• Easy Theming: themeit simplifies the process of creating and using different themes for react components.
• Code Splitting: It allows you to load only the themes you need at a time, optimizing performance.
• Support for CSS Modules and JS style objects: You can use CSS Modules or JS style objects to define your themes.
• Option for Default Theme: You can set a default theme to be used if no other theme is specified.
• Base Styles: You can define base styles that should always be applied, regardless of the theme.
• Mergeable Styles Context: You can choose whether styles contexts should be merged or not.
• Additional Props: When a component is wrapped with themeit, it accepts additional props such as addStyleFiles and styles.
• Automatic Storybook Stories Generation: themeit provides a babel plugin that automatically generates stories for each component theme when used with Storybook.

Installation:

To install themeit, follow these steps:

1. Install the package using npm or yarn: npm install themeit or yarn add themeit
2. Import themeit in your project: import themeit from 'themeit'
3. Wrap your react component with themeit: themeit({...})

Summary:

themeit is a powerful tool for creating and using themes for react components. It supports both CSS Modules and JS style objects for defining themes, and provides features like code splitting and base styles. It also allows for easy styling of nested components and provides options for customizing the theming process. With the additional features like automatic storybook stories generation, themeit simplifies the process of theming react components and enhances code organization and reusability.