Overview:

This project is an opinionated theming library called Styled-JSX Theming Library. It is designed to be used with Styled-JSX projects, but can also be used with other React styling libraries. The purpose of this library is to help developers develop stylesheets faster.

Features:

• Easy installation: The library can be easily installed using npm or Yarn.
• ThemingProvider component: Developers can wrap their React app with the ThemingProvider component to enable theming in their application.
• Multiple themes support: The library supports multiple themes, allowing developers to switch between different themes easily.
• useTheme React Hook: This library provides a useTheme React Hook to easily access the currently selected theme in a component.
• withTheme HOC: Alternatively, developers can use the withTheme Higher Order Component (HOC) to access the currently selected theme in a component.
• Open to contributions: The Styled-JSX Theming Library welcomes contributions from the community. Developers can submit pull requests for review.

Installation:

To install the Styled-JSX Theming Library, follow these steps:

1. Install the package using npm:

npm install styled-jsx-theming-library

Alternatively, if you use Yarn:

yarn add styled-jsx-theming-library

2. Wrap your React app with the ThemingProvider component. In your pages/_app.js and gatsby-browser.js files, add the following code:

import { ThemingProvider } from 'styled-jsx-theming-library';

export default function MyApp({ Component, pageProps }) {
  return (
    <ThemingProvider>
      <Component {...pageProps} />
    </ThemingProvider>
  );
}

3. Start using the theme in your components. You can either use the useTheme React Hook or the withTheme Higher Order Component (HOC) to access the currently selected theme.

For more advanced usage, such as using multiple themes, refer to the official documentation.

Summary:

The Styled-JSX Theming Library is an opinionated theming solution for Styled-JSX projects. It offers easy installation, multiple themes support, and provides convenient tools like the useTheme React Hook and withTheme HOC for accessing the currently selected theme in a component. This library welcomes contributions and is developed with TypeScript.