PkgFoundry
Catalog npm
Back to packageRELEASE DETAILS

0.1.4

npm

@-ft/mode-next

Next wrapper for theme mode manager

Published17 Apr 2024
Direct dependencies2
Transitive dependenciesNot calculated

README

Current package documentation

mode-next - Theme mode manager wrapper for Next

Next wrapper of dark/light theme mode manager for web

Usage

  • Generate /public/mode.js using @-ft/mode-codegen package.
{
  "variableName": "__theme_mode",
  "persist": {
    "type": "cookie",
    "key": "THEME"
  }
}
  • Load /mode.js in src/app/layout.tsx, apply default cookie-stored theme mode to class name/ssrInitialMode and suppress hydration warning
import { ModeContextProvider } from '@-ft/mode-next';

export default function RootLayout({ children }: PropsWithChildren) {
  return (
    <html
      lang="en"
      className={cookies().get('THEME')?.value === "dark" ? "dark" : undefined}
      suppressHydrationWarning
    >
      <head>
        <script src="/mode.js" />
      </head>
      <body>
        <ModeContextProvider
          variableName="__theme_mode"
          ssrInitialMode={theme?.value ?? "system"}
        >
          {children}
        </ModeContextProvider>
      </body>
    </html>
  );
}
  • Then you can use ModeContext in your app.
'use client';

import { ModeContext } from '@-ft/mode-next';

function ModeBar() {
  const { mode, setMode } = useContext(ModeContext);

  return (
    <Bar>
      Current theme mode is {mode}.
      <Select
        onChange={useCallback((mode) => setMode(mode), [setMode])}
      >
        {['system', 'light', 'dark']}
      </Select>
    </Bar>
  )
}

Downloads & popularity

Awaiting observations

No metric observations yet

Download counts and popularity will appear here as the collector receives them.

Declared dependencies 2

Native requirements
2 direct targetsNot calculated transitive count
Package / targetRequirementRelationship
next
Environment
{
  "local_name": "next",
  "alias": false,
  "peer_metadata": null
}
13 || 14peer
@-ft/mode
Environment
{
  "local_name": "@-ft/mode",
  "alias": false,
  "peer_metadata": null
}
^0.1.0peer

Distribution files

1 collected
Distribution 1

Source distribution

Source file
Checksums from source
{
  "shasum": "e6ff9836bffb5ae742084c4d10ded68c9f588dcb",
  "tarball": "https://registry.npmjs.org/@-ft/mode-next/-/mode-next-0.1.4.tgz",
  "fileCount": 4,
  "integrity": "sha512-KCAq7P4+RdwbXXGTSsnklfhvjoo+6FPlHXzCo0pvUXbADdhRyn6hzu8YmT2KVu3QnJweP3hm7M3hJYQkmFYNUw==",
  "signatures": [
    {
      "sig": "MEUCIGz0TUrB4i1P3QNPtIVpmpOEI/DKOQw+X4jMlzL7+so6AiEAniznDLq7iwpKYbAWy9lfRYqnB00kwCBipK7PNK//3gk=",
      "keyid": "SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"
    }
  ],
  "unpackedSize": 3398
}

Repository

PENDING
42ts/-ft-mode-next

Shared repository data · GitHub

License detected in repository
Not collected

Metadata history

Meaningful changes
Current collected state Current

Observed since 20 Oct, 21:49 UTC

No superseded metadata states collected. Unchanged observations do not create new revisions.

Record identity

package_version:8dc57d0c8879fb36cfd0a34bb691057c41af85be5e71c1e51fdeab562093eebf

Other collected versions

0.1.716 May0.1.626 May0.1.517 Apr0.1.317 Apr0.1.227 Oct0.1.114 SeptView all collected versions →