@tuv-indo/theme
TypeScript icon, indicating that this package has built-in type declarations

0.0.2 • Public • Published

@tuv/theme

The @tuv/theme package provides theming capabilities for React applications. It allows you to define and apply custom themes to your components easily.

Installation

Using npm:

npm install @tuv/theme

Using yarn:

yarn add @tuv/theme

Using pnpm:

pnpm add @tuv/theme

Usage

ThemeProvider

Wrap your application with the ThemeProvider component to provide the theme context to all child components.

import React from "react";
import ReactDOM from "react-dom";
import { ThemeProvider } from "@tuv/theme";

const theme = {
  colors: {
    main: {
      primary: {
        "background-color": "red",
      },
    },
  },
};

const App = () => {
  return (
    <ThemeProvider value={theme}>
      {/* Your application content */}
    </ThemeProvider>
  );
};

ReactDOM.render(<App />, document.getElementById("root"));

For full theme configuration please check https://github.com/tuv-solusi-digital/tuv-theme/blob/main/src/default.json

useTheme Hook

Use the useTheme hook to access the current theme object and functions for updating the theme.

import React from "react";
import { Button } from "@tuv/button";
import { useTheme } from "@tuv/theme";

const AppContent = () => {
  const { theme, setTheme } = useTheme();

  const handleThemeChange = () => {
    const newTheme = {
      colors: {
        main: {
          primary: {
            "background-color": "green",
            hover: {
              "background-color": "green",
            },
          },
        },
      },
    };
    setTheme(newTheme);
  };

  return (
    <div>
      <Button onClick={handleThemeChange}>Change Theme</Button>
    </div>
  );
};

export default AppContent;

Example

import React from "react";
import ReactDOM from "react-dom";
import { ThemeProvider } from "@tuv/theme";
import AppContent from "./AppContent";

const theme = {
  colors: {
    main: {
      primary: {
        "background-color": "red",
      },
    },
  },
};

const App = () => {
  return (
    <ThemeProvider value={theme}>
      <AppContent />
    </ThemeProvider>
  );
};

ReactDOM.render(<App />, document.getElementById("root"));

API

ThemeProvider

Props

  • value: The theme object to be applied to the component tree.

useTheme Hook

Returns

  • theme: The current theme object.
  • setTheme: A function to update the theme.

License

This project is licensed under the MIT License - see the LICENSE file for details.

Readme

Keywords

none

Package Sidebar

Install

npm i @tuv-indo/theme

Weekly Downloads

81

Version

0.0.2

License

ISC

Unpacked Size

115 kB

Total Files

36

Last publish

Collaborators

  • prawitohudoro
  • dani_ganteng
  • tuvindo