1.0.5 • Published 8 months ago

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

Weekly downloads
-
License
MIT
Repository
github
Last release
8 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

8 months ago

1.0.4

8 months ago

1.0.3

8 months ago

1.0.2

8 months ago

1.0.1

8 months ago

1.0.0

8 months ago