React API

Use the React hooks and provider for seamless integration with React applications.

Import

import { useResetTheme, ThemeProvider, useTheme } from 'ospinajuanp-reset-css/react';

ThemeProvider

Name	Type	Default	Description
defaultTheme	ThemeName	undefined	The default theme to apply on initial render. If not provided, no theme is applied.
children	ReactNode	-	The child components that will have access to the theme context.

useResetTheme Hook

Name	Type	Default	Description
initialTheme	ThemeName	undefined	The initial theme for this hook instance.

Return Value

Name	Type	Default	Description
theme	ThemeName	-	The current active theme.
setTheme	(theme: ThemeName) => void	-	Function to change the current theme.
themes	ThemeName[]	-	Array of all available theme names.

useTheme Hook

Use useTheme inside a ThemeProvider to access the theme context. Returns the same object as useResetTheme.

Usage Examples

Using useResetTheme directly

import { useResetTheme } from 'ospinajuanp-reset-css/react';

function ThemeSwitcher() {
  const { theme, setTheme, themes } = useResetTheme('dark');

  return (
    <div>
      <p>Current theme: {theme}</p>
      <select value={theme} onChange={(e) => setTheme(e.target.value)}>
        {themes.map(t => <option key={t} value={t}>{t}</option>)}
      </select>
    </div>
  );
}

Using ThemeProvider

import { ThemeProvider, useTheme } from 'ospinajuanp-reset-css/react';

function ThemeSwitcher() {
  const { theme, setTheme, themes } = useTheme();
  return (
    <select value={theme} onChange={(e) => setTheme(e.target.value)}>
      {themes.map(t => <option key={t} value={t}>{t}</option>)}
    </select>
  );
}

export default function App() {
  return (
    <ThemeProvider defaultTheme="dark">
      <ThemeSwitcher />
    </ThemeProvider>
  );
}