1.0.5 • Published 10 months ago

@react-web-kit/theme-provider v1.0.5

Weekly downloads
-
License
MIT
Repository
github
Last release
10 months ago

🎨 TremeProvider

TremeProvider is a React component that provides a theming system based on styled-components. It allows applying global styles and customizing the theme using a configuration object.

📦 Installation

With npm

npm install @react-web-kit/theme-provider

With Yarn:

yarn add @react-web-kit/theme-provider

With pnpm:

pnpm add @react-web-kit/theme-provider

🚀 Usage

import React from 'react';
import ThemeProvider from '@react-web-kit/theme-provider';
import App from './App';

const MyApp = () => {
  return (
    <ThemeProvider>
      <App />
    </ThemeProvider>
  );
};

export default MyApp;

⚙️ Props

PropTypeDescription
childrenReact.ReactNodeElements that will be wrapped inside the theme provider.
customThemePartialDefaultThemeAllows customization of the default theme.
resetGlobalStylesbooleanIf true, applies the defined global styles.

🎨 Theme Customization

You can extend the default theme using customTheme.

import React from 'react';
import ThemeProvider from '@react-web-kit/theme-provider';

const customTheme = {
  colors: {
    primary: '#ff5733',
    secondary: '#33ff57',
  },
};

const MyApp = () => {
  return (
    <ThemeProvider customTheme={customTheme}>
      <h1>Hello, world!</h1>
    </ThemeProvider>
  );
};

export default MyApp;

🌍 Global Styles

If you want to apply global styles, use resetGlobalStyles:

<ThemeProvider resetGlobalStyles>
  <App />
</ThemeProvider>

🤝 Contributing

If you would like to contribute, please open a PR or issue on the GitHub repository. All contributions are welcome! 🚀

📜 License

This project is licensed under the MIT License.

1.0.5

10 months ago

1.0.4

10 months ago

1.0.3

10 months ago

1.0.2

10 months ago

1.0.1

11 months ago

1.0.0

11 months ago