@flexnative/theme-context
Version:
React ThemeContext
64 lines • 2.13 kB
JavaScript
/**
* @file ThemeProvider.tsx
* @author Redon Alla <redon.alla@gmail.com>
* @createDate 2023-06-04 21:29:02
* @modifyDate 2025-03-02 18:36:42
* @description Provides theming capabilities to the application through a React Context.
*
* This file defines the `ThemeProvider` component, which is responsible for
* managing the application's theme and making it available to child components
* via a React Context. It allows for dynamic theme switching, color scheme
* management, and persisting theme preferences.
*/
import React from 'react';
import ThemeContext from './ThemeContext';
import { defaultTheme } from './theme-utilities';
/**
* ThemeProvider Component
*
* Provides a React Context for managing the application's theme. This component
* allows you to define, switch, and persist themes and color schemes.
*
* @template TColors - An optional type to extend the base colors with custom color properties.
* @extends React.PureComponent<ThemeProviderProps<TColors>, StateProps<TColors>>
* @example
* ```typescript
* // Example of extending the BaseColors
* interface MyColors {
* myCustomColor: ColorValue;
* }
*
* // Example of implementation
* class AppThemeProvider extends ThemeProvider<MyColors, {}> {
* protected async onLoad() {
* // Load theme from storage
* }
* protected async onChangeColorScheme(scheme) { ... }
* protected async onChangeTheme(theme) { ... }
* }
*
* // Usage
* <AppThemeProvider>
* <MyApp />
* </AppThemeProvider>
* ```
*/
export default class ThemeProvider extends React.PureComponent {
constructor(props) {
super(props);
this.state = {
theme: props.theme ?? defaultTheme()
};
}
render() {
return (<ThemeContext.Provider value={{
state: this.state.theme,
setTheme: this.onChangeTheme.bind(this),
setColorScheme: this.onChangeColorScheme.bind(this),
setScale: this.onScaleChange.bind(this)
}}>
{this.props.children}
</ThemeContext.Provider>);
}
}
//# sourceMappingURL=ThemeProvider.js.map