bechbox-ui

v1.0.50

Published

3 months ago

Small basic component library

0High
0Medium
0Low

bechbox-ui component library

This is the bechbox-ui component library. A simple component library with basic components with a little twist: Button with animations and Text with transitions etc.

Usage

Visit https://ui.bechbox.com/ to learn more about the components and how to install and use.

Themes

bechbox-ui supports both light and dark themes. You can use themes in two ways: with the ThemeProvider component (recommended) or by manually setting the theme attribute.

Using ThemeProvider (Recommended)

The ThemeProvider component manages theme state, persists the user's preference to localStorage, and automatically applies the theme to your application.

Basic Setup

import { ThemeProvider, Button, useTheme } from "bechbox-ui";

function App() {
  return (
    <ThemeProvider defaultTheme="light">
      <YourAppContent />
    </ThemeProvider>
  );
}

Theme Toggle Example

import { ThemeProvider, useTheme, Button } from "bechbox-ui";

function ThemeToggle() {
  const { theme, toggleTheme } = useTheme();
  
  return (
    <Button onClick={toggleTheme}>
      Switch to {theme === "light" ? "dark" : "light"} mode
    </Button>
  );
}

function App() {
  return (
    <ThemeProvider defaultTheme="light">
      <ThemeToggle />
      {/* Rest of your app */}
    </ThemeProvider>
  );
}

ThemeProvider Props

defaultTheme?: "light" | "dark" - The default theme to use (defaults to "light")
storageKey?: string - The localStorage key to store the theme preference (defaults to "bechbox-ui-theme")
children: React.ReactNode - Your application content

useTheme Hook

The useTheme hook provides access to the current theme and theme control functions:

const { theme, setTheme, toggleTheme } = useTheme();

// theme: "light" | "dark" - Current theme
// setTheme: (theme: "light" | "dark") => void - Set theme directly
// toggleTheme: () => void - Toggle between light and dark

Note: useTheme must be used within a ThemeProvider. If used outside, it will throw an error.

Manual Theme Switching (Without ThemeProvider)

You can also control themes manually by setting the data-theme attribute on the document's root element (<html>).

Setting Theme Manually

// Set to dark theme
document.documentElement.setAttribute("data-theme", "dark");

// Set to light theme
document.documentElement.setAttribute("data-theme", "light");

Toggle Theme Manually

function toggleTheme() {
  const currentTheme = document.documentElement.getAttribute("data-theme");
  const newTheme = currentTheme === "dark" ? "light" : "dark";
  document.documentElement.setAttribute("data-theme", newTheme);
}

React Example (Manual)

import { useState, useEffect } from "react";
import { Button } from "bechbox-ui";

function App() {
  const [theme, setTheme] = useState<"light" | "dark">("light");

  useEffect(() => {
    document.documentElement.setAttribute("data-theme", theme);
    // Optionally save to localStorage
    localStorage.setItem("my-theme", theme);
  }, [theme]);

  const toggleTheme = () => {
    setTheme((prev) => (prev === "light" ? "dark" : "light"));
  };

  return (
    <div>
      <Button onClick={toggleTheme}>
        Switch to {theme === "light" ? "dark" : "light"} mode
      </Button>
      {/* Rest of your app */}
    </div>
  );
}

Theme Persistence

When using ThemeProvider, the theme preference is automatically saved to localStorage and restored on page load. If you're managing themes manually, you'll need to handle persistence yourself:

// On mount, restore theme from localStorage
useEffect(() => {
  const savedTheme = localStorage.getItem("my-theme") as "light" | "dark";
  if (savedTheme) {
    document.documentElement.setAttribute("data-theme", savedTheme);
  }
}, []);

// Save theme when it changes
useEffect(() => {
  const theme = document.documentElement.getAttribute("data-theme");
  if (theme) {
    localStorage.setItem("my-theme", theme);
  }
}, [theme]);

Available Themes

light - Light theme with white backgrounds and dark text
dark - Dark theme with dark backgrounds and light text

All components automatically adapt to the current theme using CSS custom properties. The theme system is CSS-based, so it works even without JavaScript enabled (though you'll need JS to switch themes).