Paalan React UI Providers

This package contains the providers for the Paalan React UI.

Installation

1npm install @paalan/react-providers

Usage

ThemeProvider - For React Framework

• Import the ThemeProvider component from @paalan/react-providers/ThemeProvider and use them in your project.

1import React from 'react';
2import ReactDOM from 'react-dom/client';
3import { ThemeProvider } from '@paalan/react-providers/ThemeProvider';
4
5import { App } from './App';
6
7const root = ReactDOM.createRoot(document.getElementById('root')!);
8
9const Root = () => {
10  return (
11    <React.StrictMode>
12      <ThemeProvider>
13        <App />
14      </ThemeProvider>
15    </React.StrictMode>
16  );
17};
18
19root.render(<Root />);

• Import the useTheme hook from the @paalan/react-providers/ThemeProvider and use them in your project.

1import { useTheme } from '@paalan/react-providers/ThemeProvider';
2
3export const App = () => {
4  const theme = useTheme();
5
6  return (
7    <div style={{ backgroundColor: theme.isDark ? 'black' : 'white' }}>
8      <h1 style={{ color: theme.isDark ? 'white' : 'black' }}>Hello, World!</h1>
9    </div>
10  );
11};

NextThemeProvider - For Next.js Framework

• Import the NextThemeProvider component from @paalan/react-providers/NextThemeProvider and use them in your project.

1import { NextThemeProvider } from '@paalan/react-providers/NextThemeProvider';
2
3import { App } from './App';
4
5const Root = () => {
6  return (
7    <NextThemeProvider>
8      <App />
9    </NextThemeProvider>
10  );
11};
12
13export default Root;

• Import the useNextTheme hook from @paalan/react-providers/NextThemeProvider and use them in your project.

1import { useNextTheme } from '@paalan/react-providers/NextThemeProvider';
2
3export const App = () => {
4  const theme = useNextTheme();
5
6  return (
7    <div style={{ backgroundColor: theme.isDark ? 'black' : 'white' }}>
8      <h1 style={{ color: theme.isDark ? 'white' : 'black' }}>Hello, World!</h1>
9    </div>
10  );
11};