next-use-theme

v3.0.4

Published

3 years ago

A NextJS wrapper component which provides a useTheme hook as well as dealing with theme changes and the dreaded Flash of incorrect theme

Downloads

127

0High
0Medium
0Low

alfiejones

Getting Started

This is an example of how you may give instructions on setting up your project locally. To get a local copy up and running follow these simple example steps.

Prerequisites

Install the package as a dependency

npm install next-use-theme

or with yarn

yarn add next-use-theme

Usage

We need to wrap the component tree with our component and so it's recommend we do this in the _app file. If you haven't already got one, create a custom _app and wrap the Component with our ThemeProvider.

Since both the ThemeProvider and ThemeScript require the same props to function properly, it's recommended to store these in a global variable.

This example uses a config stored in _app but it can also be placed into its own file.

// Example pages/_app.js
import { ThemeProvider } from "next-use-theme";

export const config = {
  themes: ["dark", "light", "tech"]
}

function MyApp({ Component, pageProps }) {
  return (
    <ThemeProvider {...config}>
      <Component {...pageProps} />
    </ThemeProvider>
  );
}

export default MyApp;

To avoid the FOIT (Flash of Incorrect Theme) we need to inject a script into the Head to run before React/Nextjs. We do this with a custom _document

// Example pages/_document.js
import { Html, Head, Main, NextScript } from 'next/document'
import { ThemeScript } from 'next-use-theme'
import { config } from './_app';

export default function Document() {
  return (
    <Html>
      <Head >
          <ThemeScript {...config} />
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  )
}

Then we you can use our hook useTheme() to access and change the current theme

// Example hook usage
import { useTheme } from "next-theme";

function ThemeButtons() {
  const { setTheme, toggle, theme } = useTheme();
  return (
    <>
      <h1>Current theme: {theme}</h1>
      <button type="button" onClick={toggle}>
        Toggle theme
      </button>
      <button type="button" onClick={() => setTheme("light")}>
        Light theme
      </button>
      <button type="button" onClick={() => setTheme("dark")}>
        Dark theme
      </button>
    </>
  );
}

API

ThemeConfig

Themes are the props for both the ThemeProvider and ThemeScript.

These are all optional

UseTheme

Returns for the useTheme Hook

TypeScript

This project is written in TypeScript and therefore fully supports it.

About The Project

I built this project to make theme handling much easier and hassle free. It's amazing how hard it is to handle theme changes so I hope this project makes your life easier

Features:

No horrible flash of incorrect theme (FOIT)
Easy to use hook and wrapper
Highly customizable
Lightweight

Contributing

Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are greatly appreciated.

License

Distributed under the MIT License. See LICENSE for more information.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme