react-theme-selector
v1.0.3
Published
A flexible and efficient React package that allows dynamic selection of multiple themes, headers, and footers using React Context. It supports asynchronous asset fetching, lazy-loaded components, and memoized values for optimal performance.
Downloads
16
Maintainers
Readme
react-theme-selector
A flexible and efficient React package that allows dynamic selection of multiple themes, headers, and footers using React Context. It supports asynchronous asset fetching, lazy-loaded components, and memoized values for optimal performance.
Features
- Dynamically switch between multiple themes.
- Select and update headers and footers on the fly.
- Supports lazy-loaded headers, footers, and themes for improved performance.
- Dynamic fetching of themes, headers, and footers from external sources (APIs, etc.).
- Memoized context values to prevent unnecessary re-renders.
- Dynamic CSS loading for theme styles.
Installation
You can install the package using npm:
npm install react-theme-selector
Usage
1. Setup ThemeProvider
Wrap your app inside the ThemeProvider
. You can pass an initial theme, fetch functions for headers and footers, and a list of available themes.
import React from 'react';
import { ThemeProvider, ThemeSelector, HeaderSelector, FooterSelector, useTheme } from 'react-theme-selector';
// Example async fetch functions
const fetchHeaders = async () => [
() => <header>Header 1</header>,
() => <header>Header 2</header>
];
const fetchFooters = async () => [
() => <footer>Footer 1</footer>,
() => <footer>Footer 2</footer>
];
const AppContent = () => {
const { header: Header, footer: Footer, theme } = useTheme();
return (
<div className={`app-container ${theme}`}>
<Header />
<div>Main Content Here</div>
<Footer />
</div>
);
};
const App = () => {
return (
<ThemeProvider
initialTheme="light"
themes={['light', 'dark']}
fetchHeaders={fetchHeaders}
fetchFooters={fetchFooters}
>
<ThemeSelector />
<HeaderSelector />
<FooterSelector />
<AppContent />
</ThemeProvider>
);
};
export default App;
2. ThemeProvider Props
| Prop | Type | Description | Default |
| ------------- | ---------------- | --------------------------------------------------------------------------------------------- | --------- |
| initialTheme
| string
| The initial theme to apply. | default
|
| themes
| array
| Array of available theme names (used for dynamically loading themes). | Required |
| fetchHeaders
| function
| Asynchronous function to fetch an array of available headers (each a React component). | Required |
| fetchFooters
| function
| Asynchronous function to fetch an array of available footers (each a React component). | Required |
3. ThemeSelector
This component renders a dropdown to allow users to select a theme from the available options.
import { ThemeSelector } from 'react-theme-selector';
<ThemeSelector />;
4. HeaderSelector
This component renders a dropdown to allow users to select a header from the available options.
import { HeaderSelector } from 'react-theme-selector';
<HeaderSelector />;
5. FooterSelector
This component renders a dropdown to allow users to select a footer from the available options.
import { FooterSelector } from 'react-theme-selector';
<FooterSelector />;
6. Using Theme, Header, and Footer in Your App
You can use the useTheme
hook to access the current theme, header, and footer in your app components.
import React from 'react';
import { useTheme } from 'react-theme-selector';
const AppContent = () => {
const { header: Header, footer: Footer, theme } = useTheme();
return (
<div className={`app-container ${theme}`}>
<Header />
<div>Main Content Here</div>
<Footer />
</div>
);
};
7. Dynamically Loading Theme CSS
The ThemeProvider
automatically loads a CSS file that matches the theme name (e.g., light.css
or dark.css
). Ensure that the appropriate CSS files are hosted and accessible for the themes you provide.
For example, if you pass ['light', 'dark']
as themes:
- Ensure that you have
light.css
anddark.css
files available at the correct path.
8. Lazy Loading Headers and Footers
For performance optimization, headers and footers are lazily loaded using React.lazy
and Suspense
. Here’s an example of how you can lazily load components when fetching headers and footers:
import React, { lazy, Suspense } from 'react';
const Header1 = lazy(() => import('./headers/Header1'));
const Header2 = lazy(() => import('./headers/Header2'));
const Footer1 = lazy(() => import('./footers/Footer1'));
const Footer2 = lazy(() => import('./footers/Footer2'));
const fetchHeaders = async () => [
() => <Suspense fallback={<div>Loading...</div>}><Header1 /></Suspense>,
() => <Suspense fallback={<div>Loading...</div>}><Header2 /></Suspense>
];
const fetchFooters = async () => [
() => <Suspense fallback={<div>Loading...</div>}><Footer1 /></Suspense>,
() => <Suspense fallback={<div>Loading...</div>}><Footer2 /></Suspense>
];
Example Project
Here’s a complete example of how the package can be used in your project:
import React from 'react';
import { ThemeProvider, ThemeSelector, HeaderSelector, FooterSelector, useTheme } from 'react-theme-selector';
// Example fetching functions
const fetchHeaders = async () => [
() => <header>Header 1</header>,
() => <header>Header 2</header>,
];
const fetchFooters = async () => [
() => <footer>Footer 1</footer>,
() => <footer>Footer 2</footer>,
];
const AppContent = () => {
const { header: Header, footer: Footer, theme } = useTheme();
return (
<div className={`app-container ${theme}`}>
<Header />
<div>Main Content Here</div>
<Footer />
</div>
);
};
const App = () => {
return (
<ThemeProvider
initialTheme="light"
themes={['light', 'dark']}
fetchHeaders={fetchHeaders}
fetchFooters={fetchFooters}
>
<ThemeSelector />
<HeaderSelector />
<FooterSelector />
<AppContent />
</ThemeProvider>
);
};
export default App;
Contributing
Contributions are welcome! Feel free to submit a pull request or open an issue for any improvements or bug fixes.
License
This project is licensed under the MIT License - see the LICENSE file for details.