ospinajuanp-reset-css

Using with React

Learn how to integrate ospinajuanp-reset-css with your React or Next.js application.

Installation

First, install the package:

npm install ospinajuanp-reset-css

Basic Setup

Import the CSS reset in your main entry file:

src/app/layout.tsx (Next.js App Router)typescript
import 'ospinajuanp-reset-css';

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

Using the Theme Provider

For dynamic theme switching, wrap your app with the ThemeProvider:

src/app/providers.tsxtypescript
'use client';

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

export function Providers({ children }) {
  return (
    <ThemeProvider defaultTheme="dark">
      {children}
    </ThemeProvider>
  );
}
src/app/layout.tsxtypescript
import { Providers } from './providers';

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <Providers>{children}</Providers>
      </body>
    </html>
  );
}

Using the Theme Hook

Access the theme in any component:

src/components/ThemeSwitcher.tsxtypescript
import { useTheme } from 'ospinajuanp-reset-css/react';

export function ThemeSwitcher() {
  const { theme, setTheme, themes } = useTheme();

  return (
    <select
      value={theme}
      onChange={(e) => setTheme(e.target.value)}
      className="rounded-md border px-3 py-2"
    >
      {themes.map((t) => (
        <option key={t} value={t}>
          {t}
        </option>
      ))}
    </select>
  );
}

Alternative: useResetTheme Hook

If you don't need the provider context, use useResetTheme directly:

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

function MyComponent() {
  const { theme, setTheme, themes } = useResetTheme('dark');
  // ... same as useTheme but standalone
}

Next Steps