From ffaec342c56d2d48426fb627e9baa25e23ac0cda Mon Sep 17 00:00:00 2001 From: Mayank Kumar Chaudhari Date: Sun, 15 Oct 2023 13:03:56 +0530 Subject: [PATCH 1/9] update readme --- .github/workflows/publish-to-npm-on-new-release.yml | 2 +- README.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/.github/workflows/publish-to-npm-on-new-release.yml b/.github/workflows/publish-to-npm-on-new-release.yml index 59b2cb12..0156f4f4 100644 --- a/.github/workflows/publish-to-npm-on-new-release.yml +++ b/.github/workflows/publish-to-npm-on-new-release.yml @@ -29,7 +29,7 @@ jobs: - name: Setup Git run: | git config --global user.name "mayank1513" - git config --global user.email "mayank-automate@noreply.github.com" + git config --global user.email "mayank.srmu@gmail.com" git fetch git checkout main - name: update version and push back to the repo diff --git a/README.md b/README.md index c11cd189..97862448 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -# Nextjs-Themes [![Version](https://img.shields.io/npm/v/nextjs-themes.svg?colorB=green)](https://www.npmjs.com/package/nextjs-themes) [![codecov](https://codecov.io/gh/mayank1513/nextjs-themes/branch/main/graph/badge.svg?token=SUTY0GHPHV)](https://codecov.io/gh/mayank1513/nextjs-themes) [![Downloads](https://img.jsdelivr.com/img.shields.io/npm/dt/nextjs-themes.svg)](https://www.npmjs.com/package/nextjs-themes) [![npm bundle size](https://img.shields.io/bundlephobia/minzip/nextjs-themes)](https://www.npmjs.com/package/nextjs-themes) [![Publish to npm and GitHub](https://github.com/mayank1513/nextjs-themes/actions/workflows/test.yml/badge.svg)](https://github.com/mayank1513/nextjs-themes/actions/workflows/publish-to-npm-on-new-release.yml) +# Nextjs-Themes [![Version](https://img.shields.io/npm/v/nextjs-themes.svg?colorB=green)](https://www.npmjs.com/package/nextjs-themes) [![codecov](https://codecov.io/gh/mayank1513/nextjs-themes/branch/main/graph/badge.svg?token=SUTY0GHPHV)](https://codecov.io/gh/mayank1513/nextjs-themes) [![Downloads](https://img.jsdelivr.com/img.shields.io/npm/dt/nextjs-themes.svg)](https://www.npmjs.com/package/nextjs-themes) [![npm bundle size](https://img.shields.io/bundlephobia/minzip/nextjs-themes)](https://www.npmjs.com/package/nextjs-themes) [![Publish to npm and GitHub](https://github.com/mayank1513/nextjs-themes/actions/workflows/test.yml/badge.svg)](https://github.com/mayank1513/nextjs-themes/actions/workflows/publish-to-npm-on-new-release.yml) [![Contact me on Codementor](https://www.codementor.io/m-badges/mayank1513/get-help.svg)](https://www.codementor.io/@mayank1513?refer=badge) 🤟 👉 [Unleash the Power of React Server Components](https://medium.com/javascript-in-plain-english/unleash-the-power-of-react-server-components-eb3fe7201231) From 66b1024e12b3f8d4e157eb411d455875c531e2c0 Mon Sep 17 00:00:00 2001 From: Mayank Kumar Chaudhari Date: Sat, 2 Dec 2023 20:01:35 +0530 Subject: [PATCH 2/9] upgrade --- README.md | 4 ++ examples/advanced-multi-theme/app/logo.tsx | 3 +- examples/advanced-multi-theme/package.json | 18 +++---- examples/nextjs-pages-router/package.json | 14 ++--- examples/simple-dark-light-mode/package.json | 14 ++--- examples/simple-multi-theme/package.json | 14 ++--- examples/vite/package.json | 24 ++++----- package.json | 10 ++-- packages/eslint-config-custom/package.json | 6 +-- packages/nextjs-themes/package.json | 38 ++++++------- packages/nextjs-themes/src/store.ts | 56 ++++++++++---------- packages/persistnsync/package.json | 6 +-- packages/zustand-sync/package.json | 6 +-- 13 files changed, 108 insertions(+), 105 deletions(-) diff --git a/README.md b/README.md index 97862448..e679c973 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,9 @@ # Nextjs-Themes [![Version](https://img.shields.io/npm/v/nextjs-themes.svg?colorB=green)](https://www.npmjs.com/package/nextjs-themes) [![codecov](https://codecov.io/gh/mayank1513/nextjs-themes/branch/main/graph/badge.svg?token=SUTY0GHPHV)](https://codecov.io/gh/mayank1513/nextjs-themes) [![Downloads](https://img.jsdelivr.com/img.shields.io/npm/dt/nextjs-themes.svg)](https://www.npmjs.com/package/nextjs-themes) [![npm bundle size](https://img.shields.io/bundlephobia/minzip/nextjs-themes)](https://www.npmjs.com/package/nextjs-themes) [![Publish to npm and GitHub](https://github.com/mayank1513/nextjs-themes/actions/workflows/test.yml/badge.svg)](https://github.com/mayank1513/nextjs-themes/actions/workflows/publish-to-npm-on-new-release.yml) [![Contact me on Codementor](https://www.codementor.io/m-badges/mayank1513/get-help.svg)](https://www.codementor.io/@mayank1513?refer=badge) +> This is a sister package of [react18-themes](https://github.com/react18-tools/react18-themes/). Initially we targeted only Next.js and thus this package was named `nextjs-themes`. However, we have expanded support for `Vite` and `Remix` as well. And thus published a package with more generic name, `react18-themes`. + +> We recommend using [react18-themes](https://github.com/react18-tools/react18-themes/) for latest updates. Though this package is also maintained with specific focus on Next.js, all the functionality of this package along with extended support for other build tools is available in [react18-themes](https://github.com/react18-tools/react18-themes/) + 🤟 👉 [Unleash the Power of React Server Components](https://medium.com/javascript-in-plain-english/unleash-the-power-of-react-server-components-eb3fe7201231) This project is inspired by next-themes. Next-themes is an awesome package, however, it requires wrapping everything in a provider. The provider has to be a client component as it uses hooks. And thus, it takes away all the benefits of Server Components. diff --git a/examples/advanced-multi-theme/app/logo.tsx b/examples/advanced-multi-theme/app/logo.tsx index 2667c0da..4321301c 100644 --- a/examples/advanced-multi-theme/app/logo.tsx +++ b/examples/advanced-multi-theme/app/logo.tsx @@ -1,6 +1,5 @@ -"use client"; import { HTMLProps } from "react"; export default function Logo(props: HTMLProps) { - return {location.origin.split("://")[1].split(".")[0]}; + return nextjs-themes; } diff --git a/examples/advanced-multi-theme/package.json b/examples/advanced-multi-theme/package.json index bafb5236..dbee0cd3 100644 --- a/examples/advanced-multi-theme/package.json +++ b/examples/advanced-multi-theme/package.json @@ -9,19 +9,19 @@ "lint": "next lint" }, "dependencies": { - "@mayank1513/fork-me": "^1.0.0", - "next": "^13.4.19", + "@mayank1513/fork-me": "^2.0.0", + "next": "^14.0.3", + "nextjs-themes": "workspace:*", "react": "^18.2.0", - "react-dom": "^18.2.0", - "nextjs-themes": "workspace:*" + "react-dom": "^18.2.0" }, "devDependencies": { - "@next/eslint-plugin-next": "^13.4.19", - "@types/node": "^20.5.7", - "@types/react": "^18.2.21", - "@types/react-dom": "^18.2.7", + "@next/eslint-plugin-next": "^14.0.3", + "@types/node": "^20.10.2", + "@types/react": "^18.2.40", + "@types/react-dom": "^18.2.17", "eslint-config-custom": "workspace:*", "tsconfig": "workspace:*", - "typescript": "^5.2.2" + "typescript": "^5.3.2" } } diff --git a/examples/nextjs-pages-router/package.json b/examples/nextjs-pages-router/package.json index 493ab3a4..b5d3ae0d 100644 --- a/examples/nextjs-pages-router/package.json +++ b/examples/nextjs-pages-router/package.json @@ -9,17 +9,17 @@ "lint": "next lint" }, "dependencies": { - "next": "^13.4.12", + "next": "^14.0.3", + "nextjs-themes": "workspace:*", "react": "^18.2.0", - "react-dom": "^18.2.0", - "nextjs-themes": "workspace:*" + "react-dom": "^18.2.0" }, "devDependencies": { - "@types/node": "^20.4.5", - "@types/react": "^18.2.17", - "@types/react-dom": "^18.2.7", + "@types/node": "^20.10.2", + "@types/react": "^18.2.40", + "@types/react-dom": "^18.2.17", "eslint-config-custom": "workspace:*", "tsconfig": "workspace:*", - "typescript": "^5.1.6" + "typescript": "^5.3.2" } } diff --git a/examples/simple-dark-light-mode/package.json b/examples/simple-dark-light-mode/package.json index 42c1df74..28e4910b 100644 --- a/examples/simple-dark-light-mode/package.json +++ b/examples/simple-dark-light-mode/package.json @@ -9,17 +9,17 @@ "lint": "next lint" }, "dependencies": { - "next": "^13.4.12", + "next": "^14.0.3", + "nextjs-themes": "workspace:*", "react": "^18.2.0", - "react-dom": "^18.2.0", - "nextjs-themes": "workspace:*" + "react-dom": "^18.2.0" }, "devDependencies": { - "@types/node": "^20.4.5", - "@types/react": "^18.2.17", - "@types/react-dom": "^18.2.7", + "@types/node": "^20.10.2", + "@types/react": "^18.2.40", + "@types/react-dom": "^18.2.17", "eslint-config-custom": "workspace:*", "tsconfig": "workspace:*", - "typescript": "^5.1.6" + "typescript": "^5.3.2" } } diff --git a/examples/simple-multi-theme/package.json b/examples/simple-multi-theme/package.json index 71661c84..79e27674 100644 --- a/examples/simple-multi-theme/package.json +++ b/examples/simple-multi-theme/package.json @@ -9,17 +9,17 @@ "lint": "next lint" }, "dependencies": { - "next": "^13.4.12", + "next": "^14.0.3", + "nextjs-themes": "workspace:*", "react": "^18.2.0", - "react-dom": "^18.2.0", - "nextjs-themes": "workspace:*" + "react-dom": "^18.2.0" }, "devDependencies": { - "@types/node": "^20.4.5", - "@types/react": "^18.2.17", - "@types/react-dom": "^18.2.7", + "@types/node": "^20.10.2", + "@types/react": "^18.2.40", + "@types/react-dom": "^18.2.17", "eslint-config-custom": "workspace:*", "tsconfig": "workspace:*", - "typescript": "^5.1.6" + "typescript": "^5.3.2" } } diff --git a/examples/vite/package.json b/examples/vite/package.json index 4333fc1e..923ddace 100644 --- a/examples/vite/package.json +++ b/examples/vite/package.json @@ -10,21 +10,21 @@ "preview": "vite preview" }, "dependencies": { - "@mayank1513/fork-me": "^1.0.0", + "@mayank1513/fork-me": "^2.0.0", + "nextjs-themes": "workspace:*", "react": "^18.2.0", - "react-dom": "^18.2.0", - "nextjs-themes": "workspace:*" + "react-dom": "^18.2.0" }, "devDependencies": { - "@types/react": "^18.2.21", - "@types/react-dom": "^18.2.7", - "@typescript-eslint/eslint-plugin": "^6.5.0", - "@typescript-eslint/parser": "^6.5.0", - "@vitejs/plugin-react-swc": "^3.3.2", - "eslint": "^8.48.0", + "@types/react": "^18.2.40", + "@types/react-dom": "^18.2.17", + "@typescript-eslint/eslint-plugin": "^6.13.1", + "@typescript-eslint/parser": "^6.13.1", + "@vitejs/plugin-react-swc": "^3.5.0", + "eslint": "^8.55.0", "eslint-plugin-react-hooks": "^4.6.0", - "eslint-plugin-react-refresh": "^0.4.3", - "typescript": "^5.2.2", - "vite": "^4.4.9" + "eslint-plugin-react-refresh": "^0.4.4", + "typescript": "^5.3.2", + "vite": "^5.0.4" } } diff --git a/package.json b/package.json index 20f4f9fd..c310d9d0 100644 --- a/package.json +++ b/package.json @@ -8,12 +8,12 @@ "format": "prettier --write \"**/*.{ts,tsx,md,mdx,css,scss}\"" }, "devDependencies": { - "@turbo/gen": "^1.10.12", - "eslint": "^8.46.0", + "@changesets/cli": "^2.27.1", + "@turbo/gen": "^1.10.16", + "eslint": "^8.55.0", "eslint-config-custom": "workspace:*", - "prettier": "^3.0.0", - "@changesets/cli": "^2.26.2", - "turbo": "^1.10.12" + "prettier": "^3.1.0", + "turbo": "^1.10.16" }, "packageManager": "pnpm@8.6.10", "name": "theme-switch" diff --git a/packages/eslint-config-custom/package.json b/packages/eslint-config-custom/package.json index 8cfd58fe..c20b0050 100644 --- a/packages/eslint-config-custom/package.json +++ b/packages/eslint-config-custom/package.json @@ -4,9 +4,9 @@ "main": "index.js", "license": "MIT", "dependencies": { - "eslint-config-next": "^13.4.12", - "eslint-config-prettier": "^8.9.0", - "eslint-config-turbo": "^1.10.12", + "eslint-config-next": "^14.0.3", + "eslint-config-prettier": "^9.1.0", + "eslint-config-turbo": "^1.10.16", "eslint-plugin-react": "7.33.2" }, "publishConfig": { diff --git a/packages/nextjs-themes/package.json b/packages/nextjs-themes/package.json index 98078d5d..089759cc 100644 --- a/packages/nextjs-themes/package.json +++ b/packages/nextjs-themes/package.json @@ -23,28 +23,28 @@ "lint": "eslint . --quiet" }, "devDependencies": { - "@testing-library/react": "^14.0.0", - "@turbo/gen": "^1.10.13", - "@types/node": "^20.5.8", - "@types/react": "^18.2.21", - "@types/react-dom": "^18.2.7", - "@vitejs/plugin-react": "^4.0.4", - "@vitest/coverage-v8": "^0.34.3", - "esbuild-plugin-ignoretests": "^0.0.3", - "esbuild-plugin-removetestid": "^0.0.3", - "esbuild-react18-useclient": "^1.0.5", + "@testing-library/react": "^14.1.2", + "@turbo/gen": "^1.10.16", + "@types/node": "^20.10.2", + "@types/react": "^18.2.40", + "@types/react-dom": "^18.2.17", + "@vitejs/plugin-react": "^4.2.0", + "@vitest/coverage-v8": "^0.34.6", + "esbuild-plugin-ignoretests": "^0.0.7", + "esbuild-plugin-removetestid": "^0.0.5", + "esbuild-react18-useclient": "^1.0.7", "eslint-config-custom": "workspace:*", - "jsdom": "^22.1.0", - "next": "^13.4.19", - "octokit": "^3.1.0", - "persist-and-sync": "^0.1.1", + "jsdom": "^23.0.1", + "next": "^14.0.3", + "octokit": "^3.1.2", + "persist-and-sync": "^1.1.0", "react": "^18.2.0", "tsconfig": "workspace:*", - "tsup": "^7.2.0", - "typescript": "5.2.2", - "vite-tsconfig-paths": "^4.2.0", - "vitest": "^0.34.3", - "zustand": "^4.4.1" + "tsup": "^8.0.1", + "typescript": "5.3.2", + "vite-tsconfig-paths": "^4.2.1", + "vitest": "^0.34.6", + "zustand": "^4.4.7" }, "peerDependencies": { "@types/react": "^16.8 || ^17 || ^18", diff --git a/packages/nextjs-themes/src/store.ts b/packages/nextjs-themes/src/store.ts index 32800b61..7c1ee736 100644 --- a/packages/nextjs-themes/src/store.ts +++ b/packages/nextjs-themes/src/store.ts @@ -4,41 +4,41 @@ import { persistNSync } from "persist-and-sync"; export type ColorSchemeType = "" | "system" | "dark" | "light"; type ThemeStoreType = { - theme: string; - darkTheme: string; - lightTheme: string; - colorSchemePref: ColorSchemeType; - forcedTheme?: string; - forcedColorScheme?: ColorSchemeType; + theme: string; + darkTheme: string; + lightTheme: string; + colorSchemePref: ColorSchemeType; + forcedTheme?: string; + forcedColorScheme?: ColorSchemeType; }; type ThemeStoreActionsType = { - setTheme: (theme: string) => void; - setDarkTheme: (defaultDarkTheme: string) => void; - setLightTheme: (defaultLightTheme: string) => void; - setColorSchemePref: (colorSchemePref: ColorSchemeType) => void; - setForcedTheme: (forcedTheme?: string) => void; - setForcedColorScheme: (forcedColorScheme?: ColorSchemeType) => void; + setTheme: (theme: string) => void; + setDarkTheme: (defaultDarkTheme: string) => void; + setLightTheme: (defaultLightTheme: string) => void; + setColorSchemePref: (colorSchemePref: ColorSchemeType) => void; + setForcedTheme: (forcedTheme?: string) => void; + setForcedColorScheme: (forcedColorScheme?: ColorSchemeType) => void; }; export const initialState: ThemeStoreType = { - theme: "", - darkTheme: "dark", - lightTheme: "", - colorSchemePref: "system", + theme: "", + darkTheme: "dark", + lightTheme: "", + colorSchemePref: "system", }; export const useTheme = create()( - persistNSync( - (set, get) => ({ - ...initialState, - setTheme: theme => set({ ...get(), theme }), - setDarkTheme: darkTheme => set({ ...get(), darkTheme }), - setLightTheme: lightTheme => set({ ...get(), lightTheme }), - setForcedTheme: forcedTheme => set({ ...get(), forcedTheme }), - setForcedColorScheme: forcedColorScheme => set({ ...get(), forcedColorScheme }), - setColorSchemePref: colorSchemePref => set({ ...get(), colorSchemePref }), - }), - { name: "nextjs-themes", regExpToIgnore: /forced/ }, - ), + persistNSync( + (set, get) => ({ + ...initialState, + setTheme: theme => set({ ...get(), theme }), + setDarkTheme: darkTheme => set({ ...get(), darkTheme }), + setLightTheme: lightTheme => set({ ...get(), lightTheme }), + setForcedTheme: forcedTheme => set({ ...get(), forcedTheme }), + setForcedColorScheme: forcedColorScheme => set({ ...get(), forcedColorScheme }), + setColorSchemePref: colorSchemePref => set({ ...get(), colorSchemePref }), + }), + { name: "nextjs-themes", exclude: [/forced/], storage: "cookies" }, + ), ); diff --git a/packages/persistnsync/package.json b/packages/persistnsync/package.json index 51c232b5..b6ee91fd 100644 --- a/packages/persistnsync/package.json +++ b/packages/persistnsync/package.json @@ -20,9 +20,9 @@ "url": "https://github.com/sponsors/mayank1513" }, "devDependencies": { - "@types/node": "^20.4.5", - "typescript": "^5.1.6", - "zustand": "^4.4.1" + "@types/node": "^20.10.2", + "typescript": "^5.3.2", + "zustand": "^4.4.7" }, "peerDependencies": { "zustand": "^3 || ^4" diff --git a/packages/zustand-sync/package.json b/packages/zustand-sync/package.json index 57ef7cbb..d275c4c1 100644 --- a/packages/zustand-sync/package.json +++ b/packages/zustand-sync/package.json @@ -22,9 +22,9 @@ "url": "https://github.com/sponsors/mayank1513" }, "devDependencies": { - "@types/node": "^20.4.5", - "typescript": "^5.1.6", - "zustand": "^4.4.1" + "@types/node": "^20.10.2", + "typescript": "^5.3.2", + "zustand": "^4.4.7" }, "peerDependencies": { "zustand": "^3 || ^4" From c5a1c088ac7fd920646149ae87969c159bcf3e7a Mon Sep 17 00:00:00 2001 From: Mayank Kumar Chaudhari Date: Sat, 2 Dec 2023 20:08:55 +0530 Subject: [PATCH 3/9] add color switch --- examples/advanced-multi-theme/app/star.tsx | 3 +- .../src/client/color-switch/color-switch.tsx | 48 +++++++++++++++++++ .../src/client/color-switch/index.ts | 3 ++ packages/nextjs-themes/src/client/index.ts | 1 + packages/nextjs-themes/src/styles.css | 43 +++++++++++++++++ packages/nextjs-themes/styles.css | 1 + packages/nextjs-themes/touchup.js | 32 ++++++------- 7 files changed, 113 insertions(+), 18 deletions(-) create mode 100644 packages/nextjs-themes/src/client/color-switch/color-switch.tsx create mode 100644 packages/nextjs-themes/src/client/color-switch/index.ts create mode 100644 packages/nextjs-themes/src/styles.css create mode 100644 packages/nextjs-themes/styles.css diff --git a/examples/advanced-multi-theme/app/star.tsx b/examples/advanced-multi-theme/app/star.tsx index 9b2de7e6..6b236d89 100644 --- a/examples/advanced-multi-theme/app/star.tsx +++ b/examples/advanced-multi-theme/app/star.tsx @@ -1,10 +1,9 @@ -"use client"; import { ForkMe } from "@mayank1513/fork-me/server"; import { StarMe } from "@mayank1513/fork-me"; import styles from "./page.module.css"; export default function Star() { - const url = `https://github.com/mayank1513/${location.origin.split("://")[1].split(".")[0].replace("-lite", "")}`; + const url = `https://github.com/mayank1513/nestjs-themes`; return ( <> diff --git a/packages/nextjs-themes/src/client/color-switch/color-switch.tsx b/packages/nextjs-themes/src/client/color-switch/color-switch.tsx new file mode 100644 index 00000000..63580dee --- /dev/null +++ b/packages/nextjs-themes/src/client/color-switch/color-switch.tsx @@ -0,0 +1,48 @@ +import * as React from "react"; +import { useTheme } from "../../store"; + +export interface ColorSwitchProps { + /** Diameter of the color color switch */ + size?: number; +} + +/** + * Color switch button to quickly set user preference + * + * @example + * ```ts + * + * ``` + * + * custom size + * ```ts + * + * ``` + */ +export function ColorSwitch({ size = 25 }: ColorSwitchProps) { + const [colorSchemePref, setColorSchemePref] = useTheme(state => [state.colorSchemePref, state.setColorSchemePref]); + const toggleColorScheme = () => { + switch (colorSchemePref) { + case "": + case "system": + setColorSchemePref("dark"); + break; + case "dark": + setColorSchemePref("light"); + break; + case "light": + setColorSchemePref("system"); + } + }; + return ( +
e.key === "Enter" && toggleColorScheme()} + role="button" + // @ts-expect-error -- setting custom attribute + style={{ "--size": `${size}px` }} + tabIndex={0} + /> + ); +} diff --git a/packages/nextjs-themes/src/client/color-switch/index.ts b/packages/nextjs-themes/src/client/color-switch/index.ts new file mode 100644 index 00000000..958d7c1d --- /dev/null +++ b/packages/nextjs-themes/src/client/color-switch/index.ts @@ -0,0 +1,3 @@ +"use client"; + +export * from "./color-switch"; diff --git a/packages/nextjs-themes/src/client/index.ts b/packages/nextjs-themes/src/client/index.ts index 21a5e8f8..cabdc792 100644 --- a/packages/nextjs-themes/src/client/index.ts +++ b/packages/nextjs-themes/src/client/index.ts @@ -5,6 +5,7 @@ * */ // client component exports +export * from "./color-switch"; export * from "./force-color-scheme"; export * from "./force-theme"; export * from "./theme-switcher"; diff --git a/packages/nextjs-themes/src/styles.css b/packages/nextjs-themes/src/styles.css new file mode 100644 index 00000000..a360d907 --- /dev/null +++ b/packages/nextjs-themes/src/styles.css @@ -0,0 +1,43 @@ +.nextjs-themes--color-switch { + position: relative; + box-shadow: none; + color: #aaa; + border-radius: 50%; + border: 1px dashed gray; + cursor: pointer; + --size: 25px; + height: var(--size); + width: var(--size); +} + +[data-color-scheme="system"] .nextjs-themes--color-switch::after, +[data-color-scheme="system"] ~ .nextjs-themes--color-switch::after, +[data-color-scheme="system"] ~ * .nextjs-themes--color-switch::after { + position: absolute; + height: 100%; + width: 100%; + top: 0; + left: 0; + font-weight: 600; + font-size: calc(1 * var(--size) / 2); + display: flex; + align-items: center; + justify-content: center; + content: "A"; +} + +[data-color-scheme="dark"] .nextjs-themes--color-switch, +[data-color-scheme="dark"] ~ .nextjs-themes--color-switch, +[data-color-scheme="dark"] ~ * .nextjs-themes--color-switch { + box-shadow: calc(var(--size) / 4) calc(var(--size) / -4) calc(var(--size) / 8) inset #fff; + border: none; + background: transparent; +} + +[data-color-scheme="light"] .nextjs-themes--color-switch, +[data-color-scheme="light"] ~ .nextjs-themes--color-switch, +[data-color-scheme="light"] ~ * .nextjs-themes--color-switch { + box-shadow: 0 0 50px 10px yellow; + background-color: yellow; + border: 1px solid orangered; +} diff --git a/packages/nextjs-themes/styles.css b/packages/nextjs-themes/styles.css new file mode 100644 index 00000000..594cb0be --- /dev/null +++ b/packages/nextjs-themes/styles.css @@ -0,0 +1 @@ +@import "./src/styles.css"; diff --git a/packages/nextjs-themes/touchup.js b/packages/nextjs-themes/touchup.js index 87497dc6..f666535c 100644 --- a/packages/nextjs-themes/touchup.js +++ b/packages/nextjs-themes/touchup.js @@ -19,27 +19,27 @@ if (process.env.TOKEN) { "X-GitHub-Api-Version": "2022-11-28", }, }; - octokit.request("GET /repos/{owner}/{repo}/topics", octoOptions).then(({ data }) => { - octoOptions.names = [...new Set([...data.names, ...packageJson.keywords])]; - if (octoOptions.names.length !== data.names.length) - octokit - .request("PUT /repos/{owner}/{repo}/topics", octoOptions) - .then(console.log) // eslint-disable-line no-console -- intentional debug log - .catch(console.error); // eslint-disable-line no-console -- intentional error log + const tagName = `v${packageJson.version}`; + const name = `Release ${tagName}`; + /** Create a release */ + octokit.request("POST /repos/{owner}/{repo}/releases", { + ...octoOptions, + tag_name: tagName, + target_commitish: "main", + name, + draft: false, + prerelease: false, + generate_release_notes: true, + headers: { + "X-GitHub-Api-Version": "2022-11-28", + }, }); } -delete packageJson.devDependencies; delete packageJson.scripts; packageJson.main = "index.js"; packageJson.types = "index.d.ts"; -fs.writeFileSync( - path.resolve(process.cwd(), "dist", "package.json"), - JSON.stringify(packageJson, null, 2), -); +fs.writeFileSync(path.resolve(process.cwd(), "dist", "package.json"), JSON.stringify(packageJson, null, 2)); -fs.copyFileSync( - path.resolve(process.cwd(), "..", "..", "README.md"), - path.resolve(process.cwd(), "dist", "README.md"), -); +fs.copyFileSync(path.resolve(process.cwd(), "..", "..", "README.md"), path.resolve(process.cwd(), "dist", "README.md")); From 7c9b0531eb44ef328cd3e167fb9d856effd0ea40 Mon Sep 17 00:00:00 2001 From: Mayank Kumar Chaudhari Date: Sat, 2 Dec 2023 20:18:59 +0530 Subject: [PATCH 4/9] update theme-switcher --- .../nextjs-themes/__mocks__/vitest-env.d.ts | 2 + packages/nextjs-themes/__mocks__/zustand.ts | 47 ++++++ .../theme-switcher/theme-switcher.test.tsx | 142 +++++++++--------- .../client/theme-switcher/theme-switcher.tsx | 142 +++++++++--------- packages/nextjs-themes/src/store.ts | 2 +- packages/nextjs-themes/src/utils.ts | 16 ++ packages/nextjs-themes/vitest-setup.ts | 55 ------- packages/nextjs-themes/vitest.config.ts | 21 +-- packages/nextjs-themes/vitest.setup.ts | 36 +++++ 9 files changed, 256 insertions(+), 207 deletions(-) create mode 100644 packages/nextjs-themes/__mocks__/vitest-env.d.ts create mode 100644 packages/nextjs-themes/__mocks__/zustand.ts create mode 100644 packages/nextjs-themes/src/utils.ts delete mode 100644 packages/nextjs-themes/vitest-setup.ts create mode 100644 packages/nextjs-themes/vitest.setup.ts diff --git a/packages/nextjs-themes/__mocks__/vitest-env.d.ts b/packages/nextjs-themes/__mocks__/vitest-env.d.ts new file mode 100644 index 00000000..97ce4524 --- /dev/null +++ b/packages/nextjs-themes/__mocks__/vitest-env.d.ts @@ -0,0 +1,2 @@ +/// +/// diff --git a/packages/nextjs-themes/__mocks__/zustand.ts b/packages/nextjs-themes/__mocks__/zustand.ts new file mode 100644 index 00000000..93043cab --- /dev/null +++ b/packages/nextjs-themes/__mocks__/zustand.ts @@ -0,0 +1,47 @@ +import type * as zustand from "zustand"; +import { act } from "@testing-library/react"; +import { afterEach, vi } from "vitest"; + +const { create: actualCreate, createStore: actualCreateStore } = await vi.importActual("zustand"); + +// a variable to hold reset functions for all stores declared in the app +export const storeResetFns = new Set<() => void>(); + +const createUncurried = (stateCreator: zustand.StateCreator) => { + const store = actualCreate(stateCreator); + const initialState = store.getState(); + storeResetFns.add(() => { + store.setState(initialState, true); + }); + return store; +}; + +// when creating a store, we get its initial state, create a reset function and add it in the set +export const create = ((stateCreator: zustand.StateCreator) => { + // to support curried version of create + return typeof stateCreator === "function" ? createUncurried(stateCreator) : createUncurried; +}) as typeof zustand.create; + +const createStoreUncurried = (stateCreator: zustand.StateCreator) => { + const store = actualCreateStore(stateCreator); + const initialState = store.getState(); + storeResetFns.add(() => { + store.setState(initialState, true); + }); + return store; +}; + +// when creating a store, we get its initial state, create a reset function and add it in the set +export const createStore = ((stateCreator: zustand.StateCreator) => { + // to support curried version of createStore + return typeof stateCreator === "function" ? createStoreUncurried(stateCreator) : createStoreUncurried; +}) as typeof zustand.createStore; + +// reset all stores after each test run +afterEach(() => { + act(() => { + storeResetFns.forEach(resetFn => { + resetFn(); + }); + }); +}); diff --git a/packages/nextjs-themes/src/client/theme-switcher/theme-switcher.test.tsx b/packages/nextjs-themes/src/client/theme-switcher/theme-switcher.test.tsx index 2d80c308..43effd09 100644 --- a/packages/nextjs-themes/src/client/theme-switcher/theme-switcher.test.tsx +++ b/packages/nextjs-themes/src/client/theme-switcher/theme-switcher.test.tsx @@ -7,83 +7,83 @@ import { ThemeSwitcher } from "./theme-switcher"; * concurrency is not feasible because of global store conflicts */ describe("theme-switcher", () => { - afterEach(cleanup); + afterEach(cleanup); - test("Test first time load based on media query", async ({ expect }) => { - window.media = "dark"; - await act(() => render()); - expect(document.documentElement.getAttribute("data-theme")).toBe("dark"); - window.media = "light"; - await act(() => render()); - expect(document.documentElement.getAttribute("data-theme")).toBe(""); - }); + test("Test first time load based on media query", async ({ expect }) => { + window.media = "dark"; + await act(() => render()); + expect(document.documentElement.getAttribute("data-theme")).toBe("dark"); + window.media = "light"; + await act(() => render()); + expect(document.documentElement.getAttribute("data-theme")).toBe(""); + }); - test("Test defaultDark and defaultLight themes", async ({ expect }) => { - const { result } = renderHook(() => useTheme()); - act(() => result.current.setDarkTheme("dark1")); - act(() => result.current.setLightTheme("light1")); - window.media = "dark"; - await act(() => render()); - expect(document.documentElement.getAttribute("data-theme")).toBe("dark1"); - window.media = "light"; - await act(() => render()); - expect(document.documentElement.getAttribute("data-theme")).toBe("light1"); - }); + test("Test defaultDark and defaultLight themes", async ({ expect }) => { + const { result } = renderHook(() => useTheme()); + act(() => result.current.setDarkTheme("dark1")); + act(() => result.current.setLightTheme("light1")); + window.media = "dark"; + await act(() => render()); + expect(document.documentElement.getAttribute("data-theme")).toBe("dark1"); + window.media = "light"; + await act(() => render()); + expect(document.documentElement.getAttribute("data-theme")).toBe("light1"); + }); - // colorScheme has higher preference - test("test themes with colorScheme=''", async ({ expect }) => { - const { result } = renderHook(() => useTheme()); - act(() => result.current.setColorSchemePref("")); - act(() => result.current.setTheme("blue")); - await act(() => render()); - expect(document.documentElement.getAttribute("data-theme")).toBe("blue"); - }); + // colorScheme has higher preference + test("test themes with colorScheme=''", async ({ expect }) => { + const { result } = renderHook(() => useTheme()); + act(() => result.current.setColorSchemePref("")); + act(() => result.current.setTheme("blue")); + await act(() => render()); + expect(document.documentElement.getAttribute("data-theme")).toBe("blue"); + }); - test("test color scheme preference", async ({ expect }) => { - const { result } = renderHook(() => useTheme()); - act(() => result.current.setColorSchemePref("light")); - act(() => result.current.setLightTheme("yellow")); - act(() => result.current.setTheme("blue")); - await act(() => render()); - expect(document.documentElement.getAttribute("data-theme")).toBe("yellow"); - act(() => result.current.setDarkTheme("dark-blue")); - act(() => result.current.setColorSchemePref("dark")); - await act(() => render()); - expect(document.documentElement.getAttribute("data-theme")).toBe("dark-blue"); - }); + test("test color scheme preference", async ({ expect }) => { + const { result } = renderHook(() => useTheme()); + act(() => result.current.setColorSchemePref("light")); + act(() => result.current.setLightTheme("yellow")); + act(() => result.current.setTheme("blue")); + await act(() => render()); + expect(document.documentElement.getAttribute("data-theme")).toBe("yellow"); + act(() => result.current.setDarkTheme("dark-blue")); + act(() => result.current.setColorSchemePref("dark")); + await act(() => render()); + expect(document.documentElement.getAttribute("data-theme")).toBe("dark-blue"); + }); - test("test forcedTheme", async ({ expect }) => { - const { result } = renderHook(() => useTheme()); - act(() => result.current.setForcedTheme("forced1")); - act(() => result.current.setForcedColorScheme("dark")); - act(() => result.current.setColorSchemePref("light")); - act(() => result.current.setTheme("f1")); - await act(() => render()); - expect(document.documentElement.getAttribute("data-theme")).toBe("forced1"); - }); + test("test forcedTheme", async ({ expect }) => { + const { result } = renderHook(() => useTheme()); + act(() => result.current.setForcedTheme("forced1")); + act(() => result.current.setForcedColorScheme("dark")); + act(() => result.current.setColorSchemePref("light")); + act(() => result.current.setTheme("f1")); + await act(() => render()); + expect(document.documentElement.getAttribute("data-theme")).toBe("forced1"); + }); - test("forced colorScheme only", async ({ expect }) => { - const { result } = renderHook(() => useTheme()); - act(() => result.current.setForcedTheme("")); - act(() => result.current.setForcedColorScheme("dark")); - act(() => result.current.setColorSchemePref("light")); - act(() => result.current.setTheme("f1")); - act(() => result.current.setLightTheme("yellow")); - act(() => result.current.setDarkTheme("black")); - await act(() => render()); - expect(document.documentElement.getAttribute("data-theme")).toBe(""); - act(() => result.current.setForcedTheme(undefined)); - expect(document.documentElement.getAttribute("data-theme")).toBe("black"); - }); + test("forced colorScheme only", async ({ expect }) => { + const { result } = renderHook(() => useTheme()); + act(() => result.current.setForcedTheme("")); + act(() => result.current.setForcedColorScheme("dark")); + act(() => result.current.setColorSchemePref("light")); + act(() => result.current.setTheme("f1")); + act(() => result.current.setLightTheme("yellow")); + act(() => result.current.setDarkTheme("black")); + await act(() => render()); + expect(document.documentElement.getAttribute("data-theme")).toBe(""); + act(() => result.current.setForcedTheme(undefined)); + expect(document.documentElement.getAttribute("data-theme")).toBe("black"); + }); - test("forced theme prop", async ({ expect }) => { - await act(() => render()); - expect(document.documentElement.getAttribute("data-theme")).toBe("theme1"); - }); + test("forced theme prop", async ({ expect }) => { + await act(() => render()); + expect(document.documentElement.getAttribute("data-theme")).toBe("theme1"); + }); - test("forced colorScheme prop", async ({ expect }) => { - // global state is continuing from previous testss - await act(() => render()); - expect(document.documentElement.getAttribute("data-theme")).toBe("yellow"); - }); + test("forced colorScheme prop", async ({ expect }) => { + // global state is continuing from previous testss + await act(() => render()); + expect(document.documentElement.getAttribute("data-theme")).toBe(""); + }); }); diff --git a/packages/nextjs-themes/src/client/theme-switcher/theme-switcher.tsx b/packages/nextjs-themes/src/client/theme-switcher/theme-switcher.tsx index b1941a2e..10742703 100644 --- a/packages/nextjs-themes/src/client/theme-switcher/theme-switcher.tsx +++ b/packages/nextjs-themes/src/client/theme-switcher/theme-switcher.tsx @@ -2,82 +2,84 @@ import * as React from "react"; import { useEffect } from "react"; import type { ColorSchemeType } from "../../store"; import { useTheme } from "../../store"; +import { resolveThemeFromColorScheme } from "../../utils"; -export function ThemeSwitcher(props: { - forcedTheme?: string; - forcedColorScheme?: ColorSchemeType; -}) { - const [theme, darkTheme, lightTheme, colorSchemePref, _forcedTheme, _forcedColorScheme] = - useTheme(state => [ - state.theme, - state.darkTheme, - state.lightTheme, - state.colorSchemePref, - state.forcedTheme, - state.forcedColorScheme, - ]); +export interface ThemeSwitcherProps { + forcedTheme?: string; + forcedColorScheme?: ColorSchemeType; + targetSelector?: string; +} + +export function ThemeSwitcher(props: ThemeSwitcherProps) { + useThemeSwitcher(props); + return null; +} + +export function useThemeSwitcher(props: ThemeSwitcherProps) { + const themeState = useTheme(); + + useEffect(() => { + const { colorSchemePref, forcedTheme, forcedColorScheme } = themeState; + const resolvedForcedTheme = props.forcedTheme === undefined ? forcedTheme : props.forcedTheme; + const resolvedForcedColorScheme = + props.forcedColorScheme === undefined ? forcedColorScheme : props.forcedColorScheme; + const colorScheme = resolvedForcedColorScheme === undefined ? colorSchemePref : resolvedForcedColorScheme; + + const media = matchMedia("(prefers-color-scheme: dark)"); + const updateTheme = () => { + const restoreTransitions = disableAnimation(); + + const newTheme = + resolvedForcedTheme !== undefined + ? resolvedForcedTheme + : resolveThemeFromColorScheme({ ...themeState, colorSchemePref: colorScheme }, media.matches); + + updateDOM({ newTheme, colorScheme, media }, props.targetSelector); + + restoreTransitions(); + }; + + if (colorScheme === "system") media.addEventListener("change", updateTheme); + else media.removeEventListener("change", updateTheme); + + updateTheme(); + return () => { + media.removeEventListener("change", updateTheme); + }; + }, [props.forcedColorScheme, props.forcedTheme, props.targetSelector, themeState]); +} + +interface UpdateDOMProps { + newTheme: string; + media: MediaQueryList; + colorScheme: ColorSchemeType; +} - const forcedTheme = props.forcedTheme === undefined ? _forcedTheme : props.forcedTheme; - const forcedColorScheme = - props.forcedColorScheme === undefined ? _forcedColorScheme : props.forcedColorScheme; - const colorScheme = forcedColorScheme === undefined ? colorSchemePref : forcedColorScheme; - useEffect(() => { - const media = matchMedia("(prefers-color-scheme: dark)"); - const updateTheme = () => { - const restoreTransitions = disableAnimation(); - let newTheme; - if (forcedTheme !== undefined) { - newTheme = forcedTheme; - } else { - switch (colorScheme) { - case "system": - newTheme = media.matches ? darkTheme : lightTheme; - break; - case "dark": - newTheme = darkTheme; - break; - case "light": - newTheme = lightTheme; - break; - default: - } - } - newTheme = newTheme === undefined ? theme : newTheme; - document.documentElement.setAttribute("data-theme", newTheme); - /** do not create cookie for forced page as they will interfere with normal prefs */ - if (!forcedColorScheme && forcedTheme === undefined) - document.cookie = `data-theme=${newTheme}`; - document.cookie = `data-theme-dark=${darkTheme}`; - document.cookie = `data-theme-light=${lightTheme}`; - document.cookie = `data-color-scheme=${media.matches ? "dark" : "light"}`; - restoreTransitions(); - }; - media.addEventListener("change", updateTheme); - updateTheme(); - return () => { - media.removeEventListener("change", updateTheme); - }; - }, [theme, darkTheme, lightTheme, forcedTheme, colorSchemePref, colorScheme, forcedColorScheme]); +function updateDOM({ newTheme, colorScheme, media }: UpdateDOMProps, targetSelector?: string) { + const target = document.querySelector(targetSelector || "#react18-themes") || document.documentElement; + target.setAttribute("data-theme", newTheme); + target.setAttribute("data-color-scheme", colorScheme); - return null; + /** store system preference for computing data-theme on server side */ + document.cookie = `data-color-scheme-system=${media.matches ? "dark" : "light"}`; } // todo: customizable transition time const disableAnimation = () => { - const css = document.createElement("style"); - css.appendChild( - document.createTextNode( - `*{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}`, - ), - ); - document.head.appendChild(css); + const css = document.createElement("style"); + css.appendChild( + document.createTextNode( + `*{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}`, + ), + ); + document.head.appendChild(css); - return () => { - // Force restyle - (() => window.getComputedStyle(document.body))(); - // Wait for next tick before removing - setTimeout(() => { - document.head.removeChild(css); - }, 1); - }; + return () => { + // Force restyle + (() => window.getComputedStyle(document.body))(); + // Wait for next tick before removing + setTimeout(() => { + document.head.removeChild(css); + }, 1); + }; }; diff --git a/packages/nextjs-themes/src/store.ts b/packages/nextjs-themes/src/store.ts index 7c1ee736..2463c820 100644 --- a/packages/nextjs-themes/src/store.ts +++ b/packages/nextjs-themes/src/store.ts @@ -3,7 +3,7 @@ import { persistNSync } from "persist-and-sync"; export type ColorSchemeType = "" | "system" | "dark" | "light"; -type ThemeStoreType = { +export type ThemeStoreType = { theme: string; darkTheme: string; lightTheme: string; diff --git a/packages/nextjs-themes/src/utils.ts b/packages/nextjs-themes/src/utils.ts new file mode 100644 index 00000000..82b6d693 --- /dev/null +++ b/packages/nextjs-themes/src/utils.ts @@ -0,0 +1,16 @@ +import type { ThemeStoreType } from "./store"; + +export function resolveThemeFromColorScheme(state: ThemeStoreType, isSystemDark: boolean) { + const { colorSchemePref, darkTheme, lightTheme, theme } = state; + + switch (colorSchemePref) { + case "system": + return isSystemDark ? darkTheme : lightTheme; + case "dark": + return darkTheme; + case "light": + return lightTheme; + default: + return theme; + } +} diff --git a/packages/nextjs-themes/vitest-setup.ts b/packages/nextjs-themes/vitest-setup.ts deleted file mode 100644 index e7ffb333..00000000 --- a/packages/nextjs-themes/vitest-setup.ts +++ /dev/null @@ -1,55 +0,0 @@ -import { act } from "@testing-library/react"; -import { afterEach, vi } from "vitest"; -import type { StateCreator } from "zustand"; -import { create as actualCreate } from "zustand"; - -// a variable to hold reset functions for all stores declared in the app -export const storeResetFns = new Set<() => void>(); - -// when creating a store, we get its initial state, create a reset function and add it in the set -export const create = (createState: StateCreator) => { - const store = actualCreate(createState); - const initialState = store.getState(); - storeResetFns.add(() => store.setState(initialState, true)); - return store; -}; - -afterEach(() => { - act(() => storeResetFns.forEach(resetFn => resetFn())); -}); - -// mock matchMedia -Object.defineProperty(window, "matchMedia", { - writable: true, - value: vi.fn().mockImplementation((query: string) => ({ - matches: query.includes(window.media), - media: query, - onchange: null, - addEventListener: vi.fn(), - removeEventListener: vi.fn(), - dispatchEvent: vi.fn(), - })), -}); - -declare global { - interface Window { - media: "dark" | "light"; - } - var cookies: Record; // eslint-disable-line no-var -- let is not supported in defining global due to block scope - var path: string; // eslint-disable-line no-var -- let is not supported in defining global due to block scope -} -Object.defineProperty(window, "media", { - writable: true, - value: "dark", -}); - -globalThis.cookies = { - "data-theme-dark": { value: "dark-blue" }, - "data-theme": { value: "light-yellow" }, -}; -globalThis.path = ""; - -vi.mock("next/headers", () => ({ - cookies: () => ({ get: (cookieName: string) => globalThis.cookies[cookieName] }), - headers: () => ({ get: (h: string) => globalThis.path }), -})); diff --git a/packages/nextjs-themes/vitest.config.ts b/packages/nextjs-themes/vitest.config.ts index 1a48c43f..a972bbfd 100644 --- a/packages/nextjs-themes/vitest.config.ts +++ b/packages/nextjs-themes/vitest.config.ts @@ -5,14 +5,15 @@ import tsconfigPaths from "vite-tsconfig-paths"; // https://vitejs.dev/config/ // eslint-disable-next-line import/no-default-export -- export default is required for config files export default defineConfig({ - plugins: [react(), tsconfigPaths()], - test: { - environment: "jsdom", - globals: true, - setupFiles: ["vitest-setup.ts"], - coverage: { - reporter: ["text", "json", "html"], - }, - threads: true, - }, + plugins: [react(), tsconfigPaths()], + test: { + environment: "jsdom", + globals: true, + setupFiles: ["vitest.setup.ts"], + coverage: { + reporter: ["text", "json", "clover", "html"], + exclude: ["__mocks__"], + }, + threads: true, + }, }); diff --git a/packages/nextjs-themes/vitest.setup.ts b/packages/nextjs-themes/vitest.setup.ts new file mode 100644 index 00000000..66e8293e --- /dev/null +++ b/packages/nextjs-themes/vitest.setup.ts @@ -0,0 +1,36 @@ +import { vi } from "vitest"; + +// mock matchMedia +Object.defineProperty(window, "matchMedia", { + writable: true, + value: vi.fn().mockImplementation((query: string) => ({ + matches: query.includes(window.media), + media: query, + onchange: null, + addEventListener: vi.fn(), + removeEventListener: vi.fn(), + dispatchEvent: vi.fn(), + })), +}); + +declare global { + interface Window { + media: "dark" | "light"; + } + var cookies: Record; // eslint-disable-line no-var -- let is not supported in defining global due to block scope + var path: string; // eslint-disable-line no-var -- let is not supported in defining global due to block scope +} +Object.defineProperty(window, "media", { + writable: true, + value: "dark", +}); + +globalThis.cookies = {}; +globalThis.path = ""; + +vi.mock("next/headers", () => ({ + cookies: () => ({ get: (cookieName: string) => globalThis.cookies[cookieName] }), + headers: () => ({ get: (h: string) => globalThis.path }), +})); + +vi.mock("zustand"); From 147cf9e3dbd14526e10def0af8f9d2548d1c3710 Mon Sep 17 00:00:00 2001 From: Mayank Kumar Chaudhari Date: Sat, 2 Dec 2023 20:23:16 +0530 Subject: [PATCH 5/9] add NextJsServerTarget --- .../server-side-wrapper.test.tsx | 151 ++++++++---------- .../server-side-wrapper.tsx | 128 +++++++++------ 2 files changed, 145 insertions(+), 134 deletions(-) diff --git a/packages/nextjs-themes/src/server/nextjs/server-side-wrapper/server-side-wrapper.test.tsx b/packages/nextjs-themes/src/server/nextjs/server-side-wrapper/server-side-wrapper.test.tsx index b6b0ebfe..a1633ca1 100644 --- a/packages/nextjs-themes/src/server/nextjs/server-side-wrapper/server-side-wrapper.test.tsx +++ b/packages/nextjs-themes/src/server/nextjs/server-side-wrapper/server-side-wrapper.test.tsx @@ -1,92 +1,71 @@ import { cleanup, render, screen } from "@testing-library/react"; import { afterEach, describe, test } from "vitest"; -import { ServerSideWrapper } from "./server-side-wrapper"; +import { NextJsSSGThemeSwitcher, ServerSideWrapper } from "."; -describe("server-side-wrapper", () => { - afterEach(cleanup); +describe("server-side-target", () => { + afterEach(cleanup); - test.concurrent("test tag", ({ expect }) => { - render( - - ServerSideWrapper - , - ); - expect(screen.getByTestId("server-side-wrapper").tagName).toBe("HTML"); - }); - test.concurrent("test custom tag", ({ expect }) => { - render(ServerSideWrapper); - expect(screen.getByTestId("server-side-wrapper").tagName).toBe("DIV"); - }); - test.concurrent("forced theme", ({ expect }) => { - globalThis.path = "/themed-page/dark1"; - render( - - ServerSideWrapper - , - ); - expect(screen.getByTestId("server-side-wrapper").getAttribute("data-theme")).toBe("dark1"); - }); + beforeEach(() => { + globalThis.cookies = { + "react18-themes": { + value: JSON.stringify({ + theme: "yellow", + darkTheme: "dark-blue", + lightTheme: "light-yellow", + colorSchemePref: "dark", + }), + }, + "data-color-scheme-system": { value: "dark" }, + }; + globalThis.path = ""; + }); - /** test cookies and forced pages */ - globalThis.cookies = { - "data-theme-dark": { value: "dark-blue" }, - "data-theme-light": { value: "light-yellow" }, - "data-theme": { value: "yellow" }, - "data-color-scheme": { value: "dark" }, - }; - test("forced color scheme dark", ({ expect }) => { - globalThis.path = "/forced-color-scheme/dark"; - render( - - ServerSideWrapper - , - ); - expect(screen.getByTestId("server-side-wrapper").getAttribute("data-theme")).toBe("dark-blue"); - }); - test("forced color scheme light", ({ expect }) => { - globalThis.path = "/forced-color-scheme/light"; - render( - - ServerSideWrapper - , - ); - expect(screen.getByTestId("server-side-wrapper").getAttribute("data-theme")).toBe( - "light-yellow", - ); - }); - test("forced color scheme system", ({ expect }) => { - globalThis.path = "/forced-color-scheme/system"; - render( - - ServerSideWrapper - , - ); - expect(screen.getByTestId("server-side-wrapper").getAttribute("data-theme")).toBe("dark-blue"); - }); - test("force disable color scheme", ({ expect }) => { - globalThis.path = "/forced-color-scheme"; - render( - - ServerSideWrapper - , - ); - expect(screen.getByTestId("server-side-wrapper").getAttribute("data-theme")).toBe("yellow"); - }); - /** forced page but no cookies */ - test("force disable color scheme", ({ expect }) => { - globalThis.cookies = {}; - globalThis.path = "/forced-color-scheme"; - render( - - ServerSideWrapper - , - ); - expect(screen.getByTestId("server-side-wrapper").getAttribute("data-theme")).toBe(""); - }); + test("test default tag", ({ expect }) => { + globalThis.cookies = {}; + render(); + expect(screen.getByTestId("server-side-target").tagName).toBe("DIV"); + }); + test("test default tag for ServerSideWrapper", ({ expect }) => { + render(); + expect(screen.getByTestId("server-side-target").tagName).toBe("HTML"); + }); + test("test custom tag", ({ expect }) => { + render(); + expect(screen.getByTestId("server-side-target").tagName).toBe("MAIN"); + }); + test("forced theme", ({ expect }) => { + globalThis.path = "/themed-page/dark1"; + render(); + expect(screen.getByTestId("server-side-target").getAttribute("data-theme")).toBe("dark1"); + }); + + /** test cookies and forced pages */ + test("forced color scheme dark", ({ expect }) => { + globalThis.path = "/forced-color-scheme/dark"; + render(); + expect(screen.getByTestId("server-side-target").getAttribute("data-theme")).toBe("dark-blue"); + expect(screen.getByTestId("server-side-target").getAttribute("data-color-scheme")).toBe("dark"); + }); + test("forced color scheme light", ({ expect }) => { + globalThis.path = "/forced-color-scheme/light"; + render(); + expect(screen.getByTestId("server-side-target").getAttribute("data-theme")).toBe("light-yellow"); + }); + test("forced color scheme system", ({ expect }) => { + globalThis.path = "/forced-color-scheme/system"; + render(); + expect(screen.getByTestId("server-side-target").getAttribute("data-theme")).toBe("dark-blue"); + }); + test("force disable color scheme", ({ expect }) => { + globalThis.path = "/forced-color-scheme"; + render(); + expect(screen.getByTestId("server-side-target").getAttribute("data-theme")).toBe("yellow"); + }); + /** forced page but no cookies */ + test("force disable color scheme", ({ expect }) => { + globalThis.cookies = {}; + globalThis.path = "/forced-color-scheme"; + render(); + expect(screen.getByTestId("server-side-target").getAttribute("data-color-scheme")).toBe(""); + }); }); diff --git a/packages/nextjs-themes/src/server/nextjs/server-side-wrapper/server-side-wrapper.tsx b/packages/nextjs-themes/src/server/nextjs/server-side-wrapper/server-side-wrapper.tsx index a2b0becc..dd0630eb 100644 --- a/packages/nextjs-themes/src/server/nextjs/server-side-wrapper/server-side-wrapper.tsx +++ b/packages/nextjs-themes/src/server/nextjs/server-side-wrapper/server-side-wrapper.tsx @@ -1,57 +1,89 @@ +import * as React from "react"; import type { HTMLProps, ReactNode } from "react"; import { cookies, headers } from "next/headers"; -import * as React from "react"; -import type { ColorSchemeType } from "../../../store"; +import type { ColorSchemeType, ThemeStoreType } from "../../../store"; +import { resolveThemeFromColorScheme } from "../../../utils"; + +export type ForcedPage = [pathMatcher: RegExp | string, themes: { theme?: string; colorScheme?: ColorSchemeType }]; + +export interface NextJsSSRThemeSwitcherProps extends HTMLProps { + children?: ReactNode; + /** @defaultValue 'div' */ + tag?: keyof JSX.IntrinsicElements; + forcedPages?: ForcedPage[]; +} + +function sharedServerComponentRenderer( + { children, tag, forcedPages, ...props }: NextJsSSRThemeSwitcherProps, + defaultTag: "div" | "html", +) { + const Tag: keyof JSX.IntrinsicElements = tag || defaultTag; + const state = cookies().get("react18-themes")?.value; + + const path = headers().get("referer"); + const forcedPageData = forcedPages?.find(forcedPage => path?.match(forcedPage[0])); + + const themeState = state ? (JSON.parse(state) as ThemeStoreType) : undefined; + const isSystemDark = cookies().get("data-color-scheme-system")?.value === "dark"; + const { dataTheme, dataColorScheme } = + forcedPageData === undefined + ? getTheme(themeState, isSystemDark) + : getForcedPageTheme(themeState, forcedPageData, isSystemDark); + + const dataProps: { "data-theme"?: string; "data-color-scheme"?: ColorSchemeType } = {}; + if (dataTheme !== undefined) dataProps["data-theme"] = dataTheme; + if (dataColorScheme !== undefined) dataProps["data-color-scheme"] = dataColorScheme; + + return ( + // @ts-expect-error -> svg props and html element props conflict + + {children} + + ); +} -export type ForcedPage = [ - pathMatcher: RegExp | string, - themes: { theme?: string; colorScheme?: ColorSchemeType }, -]; +export function NextJsSSGThemeSwitcher(props: NextJsSSRThemeSwitcherProps) { + return sharedServerComponentRenderer(props, "div"); +} -type ServerSideWrapperProps = { - children: ReactNode; - tag?: keyof JSX.IntrinsicElements; - forcedPages?: ForcedPage[]; -} & HTMLProps; +/** For naming consistancy, clarity, and minimizing API updates */ +export { NextJsSSGThemeSwitcher as NextJsServerTarget }; +export interface ServerSideWrapperProps extends NextJsSSRThemeSwitcherProps { + /** @defaultValue 'html' */ + tag?: keyof JSX.IntrinsicElements; +} /** - * # ServerSideWrapper * Server side wrapper for Next.js to replace `html` tag */ -export function ServerSideWrapper({ - children, - tag, - forcedPages, - ...props -}: ServerSideWrapperProps) { - const Tag: keyof JSX.IntrinsicElements = tag || "html"; - const dataTheme = cookies().get("data-theme")?.value || ""; - const path = headers().get("x-invoke-path"); - let theme; - if (forcedPages) { - const dataThemeDark = cookies().get("data-theme-dark")?.value || ""; - const dataThemeLight = cookies().get("data-theme-light")?.value || ""; - const dataColorScheme = cookies().get("data-color-scheme")?.value || ""; - for (const f of forcedPages) { - if (path?.match(f[0])) { - if (f[1].theme) { - theme = f[1].theme; - } else if (f[1].colorScheme === "") { - theme = dataTheme; - } else { - const colorScheme = f[1].colorScheme === "system" ? dataColorScheme : f[1].colorScheme; - theme = colorScheme === "dark" ? dataThemeDark : dataThemeLight; - } - } - } - } - return ( - // @ts-expect-error -> svg props and html element props conflict - - {children} - - ); +export function ServerSideWrapper(props: ServerSideWrapperProps) { + return sharedServerComponentRenderer(props, "html"); +} + +interface Theme { + dataTheme?: string; + dataColorScheme?: ColorSchemeType; +} + +function getTheme(themeState: ThemeStoreType | undefined, isSystemDark: boolean): Theme { + if (!themeState) return {}; + const dataTheme = resolveThemeFromColorScheme(themeState, isSystemDark); + return { dataTheme, dataColorScheme: themeState.colorSchemePref }; +} + +function getForcedPageTheme( + themeState: ThemeStoreType | undefined, + forcedPageData: ForcedPage, + isSystemDark: boolean, +): Theme { + const dataColorScheme = + forcedPageData[1].colorScheme === undefined ? themeState?.colorSchemePref : forcedPageData[1].colorScheme; + + let dataTheme; + if (forcedPageData[1].theme) { + dataTheme = forcedPageData[1].theme; + } else if (dataColorScheme !== undefined && themeState !== undefined) { + dataTheme = resolveThemeFromColorScheme({ ...themeState, colorSchemePref: dataColorScheme }, isSystemDark); + } + return { dataTheme, dataColorScheme }; } From da1cdd9e64c46bbad99343951abff99c500c3127 Mon Sep 17 00:00:00 2001 From: Mayank Kumar Chaudhari Date: Sat, 2 Dec 2023 20:26:53 +0530 Subject: [PATCH 6/9] docs(changeset): Add SSG optimization for Next.js app router --- .changeset/four-emus-camp.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/four-emus-camp.md diff --git a/.changeset/four-emus-camp.md b/.changeset/four-emus-camp.md new file mode 100644 index 00000000..70e428f6 --- /dev/null +++ b/.changeset/four-emus-camp.md @@ -0,0 +1,5 @@ +--- +"nextjs-themes": minor +--- + +Add SSG optimization for Next.js app router From 0ac74bb4506dd3d0b80134012a1ebcce3fb8d592 Mon Sep 17 00:00:00 2001 From: Mayank Kumar Chaudhari Date: Sat, 2 Dec 2023 20:36:33 +0530 Subject: [PATCH 7/9] add docs --- README.md | 3 +- docs/.nojekyll | 1 + docs/assets/highlight.css | 134 ++ docs/assets/main.js | 59 + docs/assets/navigation.js | 1 + docs/assets/search.js | 1 + docs/assets/style.css | 1394 +++++++++++++++++ ...color_switch_color_switch.ColorSwitch.html | 7 + ...e_force_color_scheme.ForceColorScheme.html | 1 + ...nt_force_theme_force_theme.ForceTheme.html | 1 + ...switcher_theme_switcher.ThemeSwitcher.html | 1 + ...tcher_theme_switcher.useThemeSwitcher.html | 1 + ...r_side_wrapper.NextJsSSGThemeSwitcher.html | 1 + ...server_side_wrapper.ServerSideWrapper.html | 2 + docs/functions/store.useTheme-1.html | 2 + docs/functions/store.useTheme.destroy.html | 2 + docs/functions/store.useTheme.getState.html | 1 + docs/functions/store.useTheme.setState.html | 1 + docs/functions/store.useTheme.subscribe.html | 1 + .../utils.resolveThemeFromColorScheme.html | 1 + docs/index.html | 73 + ..._switch_color_switch.ColorSwitchProps.html | 3 + ...her_theme_switcher.ThemeSwitcherProps.html | 4 + ...e_wrapper.NextJsSSRThemeSwitcherProps.html | 519 ++++++ ...r_side_wrapper.ServerSideWrapperProps.html | 519 ++++++ .../client_color_switch_color_switch.html | 3 + ...force_color_scheme_force_color_scheme.html | 2 + .../client_force_theme_force_theme.html | 2 + .../client_theme_switcher_theme_switcher.html | 4 + ...rver_side_wrapper_server_side_wrapper.html | 7 + docs/modules/store.html | 6 + docs/modules/store.useTheme.html | 5 + docs/modules/utils.html | 2 + ...rapper_server_side_wrapper.ForcedPage.html | 1 + docs/types/store.ColorSchemeType.html | 1 + docs/types/store.ThemeStoreType.html | 1 + docs/variables/store.initialState.html | 1 + package.json | 1 + packages/nextjs-themes/package.json | 14 +- packages/nextjs-themes/tsconfig.doc.json | 5 + packages/nextjs-themes/typedoc.config.js | 9 + turbo.json | 1 + 42 files changed, 2792 insertions(+), 6 deletions(-) create mode 100644 docs/.nojekyll create mode 100644 docs/assets/highlight.css create mode 100644 docs/assets/main.js create mode 100644 docs/assets/navigation.js create mode 100644 docs/assets/search.js create mode 100644 docs/assets/style.css create mode 100644 docs/functions/client_color_switch_color_switch.ColorSwitch.html create mode 100644 docs/functions/client_force_color_scheme_force_color_scheme.ForceColorScheme.html create mode 100644 docs/functions/client_force_theme_force_theme.ForceTheme.html create mode 100644 docs/functions/client_theme_switcher_theme_switcher.ThemeSwitcher.html create mode 100644 docs/functions/client_theme_switcher_theme_switcher.useThemeSwitcher.html create mode 100644 docs/functions/server_nextjs_server_side_wrapper_server_side_wrapper.NextJsSSGThemeSwitcher.html create mode 100644 docs/functions/server_nextjs_server_side_wrapper_server_side_wrapper.ServerSideWrapper.html create mode 100644 docs/functions/store.useTheme-1.html create mode 100644 docs/functions/store.useTheme.destroy.html create mode 100644 docs/functions/store.useTheme.getState.html create mode 100644 docs/functions/store.useTheme.setState.html create mode 100644 docs/functions/store.useTheme.subscribe.html create mode 100644 docs/functions/utils.resolveThemeFromColorScheme.html create mode 100644 docs/index.html create mode 100644 docs/interfaces/client_color_switch_color_switch.ColorSwitchProps.html create mode 100644 docs/interfaces/client_theme_switcher_theme_switcher.ThemeSwitcherProps.html create mode 100644 docs/interfaces/server_nextjs_server_side_wrapper_server_side_wrapper.NextJsSSRThemeSwitcherProps.html create mode 100644 docs/interfaces/server_nextjs_server_side_wrapper_server_side_wrapper.ServerSideWrapperProps.html create mode 100644 docs/modules/client_color_switch_color_switch.html create mode 100644 docs/modules/client_force_color_scheme_force_color_scheme.html create mode 100644 docs/modules/client_force_theme_force_theme.html create mode 100644 docs/modules/client_theme_switcher_theme_switcher.html create mode 100644 docs/modules/server_nextjs_server_side_wrapper_server_side_wrapper.html create mode 100644 docs/modules/store.html create mode 100644 docs/modules/store.useTheme.html create mode 100644 docs/modules/utils.html create mode 100644 docs/types/server_nextjs_server_side_wrapper_server_side_wrapper.ForcedPage.html create mode 100644 docs/types/store.ColorSchemeType.html create mode 100644 docs/types/store.ThemeStoreType.html create mode 100644 docs/variables/store.initialState.html create mode 100644 packages/nextjs-themes/tsconfig.doc.json create mode 100644 packages/nextjs-themes/typedoc.config.js diff --git a/README.md b/README.md index e679c973..bc8b15b4 100644 --- a/README.md +++ b/README.md @@ -18,12 +18,13 @@ This project is inspired by next-themes. Next-themes is an awesome package, howe - ✅ Perfect dark mode in 2 lines of code - ✅ System setting with prefers-color-scheme - ✅ Themed browser UI with color-scheme -- ✅ Support for Next.js 13 `appDir` +- ✅ Support for Next.js 13 & Next.js 14 `appDir` - ✅ Sync theme across tabs and windows - ✅ Disable flashing when changing themes - ✅ Force pages to specific themes - ✅ Class or data attribute selector - ✅ Manipulate theme via `useTheme` hook +- ✅ Doccumented with [Typedoc](https://react18-tools.github.io/nextjs-themes) ([Docs](https://react18-tools.github.io/nextjs-themes)) Check out the [live example](https://nextjs-themes.vercel.app/). diff --git a/docs/.nojekyll b/docs/.nojekyll new file mode 100644 index 00000000..e2ac6616 --- /dev/null +++ b/docs/.nojekyll @@ -0,0 +1 @@ +TypeDoc added this file to prevent GitHub Pages from using Jekyll. You can turn off this behavior by setting the `githubPages` option to false. \ No newline at end of file diff --git a/docs/assets/highlight.css b/docs/assets/highlight.css new file mode 100644 index 00000000..c50d30d7 --- /dev/null +++ b/docs/assets/highlight.css @@ -0,0 +1,134 @@ +:root { + --light-hl-0: #795E26; + --dark-hl-0: #DCDCAA; + --light-hl-1: #000000; + --dark-hl-1: #D4D4D4; + --light-hl-2: #A31515; + --dark-hl-2: #CE9178; + --light-hl-3: #008000; + --dark-hl-3: #6A9955; + --light-hl-4: #AF00DB; + --dark-hl-4: #C586C0; + --light-hl-5: #001080; + --dark-hl-5: #9CDCFE; + --light-hl-6: #0000FF; + --dark-hl-6: #569CD6; + --light-hl-7: #800000; + --dark-hl-7: #808080; + --light-hl-8: #267F99; + --dark-hl-8: #4EC9B0; + --light-hl-9: #E50000; + --dark-hl-9: #9CDCFE; + --light-hl-10: #000000FF; + --dark-hl-10: #D4D4D4; + --light-hl-11: #800000; + --dark-hl-11: #569CD6; + --light-hl-12: #800000; + --dark-hl-12: #D7BA7D; + --light-hl-13: #0451A5; + --dark-hl-13: #CE9178; + --light-hl-14: #0070C1; + --dark-hl-14: #4FC1FF; + --light-hl-15: #098658; + --dark-hl-15: #B5CEA8; + --light-code-background: #FFFFFF; + --dark-code-background: #1E1E1E; +} + +@media (prefers-color-scheme: light) { :root { + --hl-0: var(--light-hl-0); + --hl-1: var(--light-hl-1); + --hl-2: var(--light-hl-2); + --hl-3: var(--light-hl-3); + --hl-4: var(--light-hl-4); + --hl-5: var(--light-hl-5); + --hl-6: var(--light-hl-6); + --hl-7: var(--light-hl-7); + --hl-8: var(--light-hl-8); + --hl-9: var(--light-hl-9); + --hl-10: var(--light-hl-10); + --hl-11: var(--light-hl-11); + --hl-12: var(--light-hl-12); + --hl-13: var(--light-hl-13); + --hl-14: var(--light-hl-14); + --hl-15: var(--light-hl-15); + --code-background: var(--light-code-background); +} } + +@media (prefers-color-scheme: dark) { :root { + --hl-0: var(--dark-hl-0); + --hl-1: var(--dark-hl-1); + --hl-2: var(--dark-hl-2); + --hl-3: var(--dark-hl-3); + --hl-4: var(--dark-hl-4); + --hl-5: var(--dark-hl-5); + --hl-6: var(--dark-hl-6); + --hl-7: var(--dark-hl-7); + --hl-8: var(--dark-hl-8); + --hl-9: var(--dark-hl-9); + --hl-10: var(--dark-hl-10); + --hl-11: var(--dark-hl-11); + --hl-12: var(--dark-hl-12); + --hl-13: var(--dark-hl-13); + --hl-14: var(--dark-hl-14); + --hl-15: var(--dark-hl-15); + --code-background: var(--dark-code-background); +} } + +:root[data-theme='light'] { + --hl-0: var(--light-hl-0); + --hl-1: var(--light-hl-1); + --hl-2: var(--light-hl-2); + --hl-3: var(--light-hl-3); + --hl-4: var(--light-hl-4); + --hl-5: var(--light-hl-5); + --hl-6: var(--light-hl-6); + --hl-7: var(--light-hl-7); + --hl-8: var(--light-hl-8); + --hl-9: var(--light-hl-9); + --hl-10: var(--light-hl-10); + --hl-11: var(--light-hl-11); + --hl-12: var(--light-hl-12); + --hl-13: var(--light-hl-13); + --hl-14: var(--light-hl-14); + --hl-15: var(--light-hl-15); + --code-background: var(--light-code-background); +} + +:root[data-theme='dark'] { + --hl-0: var(--dark-hl-0); + --hl-1: var(--dark-hl-1); + --hl-2: var(--dark-hl-2); + --hl-3: var(--dark-hl-3); + --hl-4: var(--dark-hl-4); + --hl-5: var(--dark-hl-5); + --hl-6: var(--dark-hl-6); + --hl-7: var(--dark-hl-7); + --hl-8: var(--dark-hl-8); + --hl-9: var(--dark-hl-9); + --hl-10: var(--dark-hl-10); + --hl-11: var(--dark-hl-11); + --hl-12: var(--dark-hl-12); + --hl-13: var(--dark-hl-13); + --hl-14: var(--dark-hl-14); + --hl-15: var(--dark-hl-15); + --code-background: var(--dark-code-background); +} + +.hl-0 { color: var(--hl-0); } +.hl-1 { color: var(--hl-1); } +.hl-2 { color: var(--hl-2); } +.hl-3 { color: var(--hl-3); } +.hl-4 { color: var(--hl-4); } +.hl-5 { color: var(--hl-5); } +.hl-6 { color: var(--hl-6); } +.hl-7 { color: var(--hl-7); } +.hl-8 { color: var(--hl-8); } +.hl-9 { color: var(--hl-9); } +.hl-10 { color: var(--hl-10); } +.hl-11 { color: var(--hl-11); } +.hl-12 { color: var(--hl-12); } +.hl-13 { color: var(--hl-13); } +.hl-14 { color: var(--hl-14); } +.hl-15 { color: var(--hl-15); } +pre, code { background: var(--code-background); } diff --git a/docs/assets/main.js b/docs/assets/main.js new file mode 100644 index 00000000..d0aa8d5f --- /dev/null +++ b/docs/assets/main.js @@ -0,0 +1,59 @@ +"use strict"; +"use strict";(()=>{var Pe=Object.create;var ne=Object.defineProperty;var Ie=Object.getOwnPropertyDescriptor;var Oe=Object.getOwnPropertyNames;var _e=Object.getPrototypeOf,Re=Object.prototype.hasOwnProperty;var Me=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports);var Fe=(t,e,n,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let i of Oe(e))!Re.call(t,i)&&i!==n&&ne(t,i,{get:()=>e[i],enumerable:!(r=Ie(e,i))||r.enumerable});return t};var De=(t,e,n)=>(n=t!=null?Pe(_e(t)):{},Fe(e||!t||!t.__esModule?ne(n,"default",{value:t,enumerable:!0}):n,t));var ae=Me((se,oe)=>{(function(){var t=function(e){var n=new t.Builder;return n.pipeline.add(t.trimmer,t.stopWordFilter,t.stemmer),n.searchPipeline.add(t.stemmer),e.call(n,n),n.build()};t.version="2.3.9";t.utils={},t.utils.warn=function(e){return function(n){e.console&&console.warn&&console.warn(n)}}(this),t.utils.asString=function(e){return e==null?"":e.toString()},t.utils.clone=function(e){if(e==null)return e;for(var n=Object.create(null),r=Object.keys(e),i=0;i0){var d=t.utils.clone(n)||{};d.position=[a,u],d.index=s.length,s.push(new t.Token(r.slice(a,o),d))}a=o+1}}return s},t.tokenizer.separator=/[\s\-]+/;t.Pipeline=function(){this._stack=[]},t.Pipeline.registeredFunctions=Object.create(null),t.Pipeline.registerFunction=function(e,n){n in this.registeredFunctions&&t.utils.warn("Overwriting existing registered function: "+n),e.label=n,t.Pipeline.registeredFunctions[e.label]=e},t.Pipeline.warnIfFunctionNotRegistered=function(e){var n=e.label&&e.label in this.registeredFunctions;n||t.utils.warn(`Function is not registered with pipeline. This may cause problems when serialising the index. +`,e)},t.Pipeline.load=function(e){var n=new t.Pipeline;return e.forEach(function(r){var i=t.Pipeline.registeredFunctions[r];if(i)n.add(i);else throw new Error("Cannot load unregistered function: "+r)}),n},t.Pipeline.prototype.add=function(){var e=Array.prototype.slice.call(arguments);e.forEach(function(n){t.Pipeline.warnIfFunctionNotRegistered(n),this._stack.push(n)},this)},t.Pipeline.prototype.after=function(e,n){t.Pipeline.warnIfFunctionNotRegistered(n);var r=this._stack.indexOf(e);if(r==-1)throw new Error("Cannot find existingFn");r=r+1,this._stack.splice(r,0,n)},t.Pipeline.prototype.before=function(e,n){t.Pipeline.warnIfFunctionNotRegistered(n);var r=this._stack.indexOf(e);if(r==-1)throw new Error("Cannot find existingFn");this._stack.splice(r,0,n)},t.Pipeline.prototype.remove=function(e){var n=this._stack.indexOf(e);n!=-1&&this._stack.splice(n,1)},t.Pipeline.prototype.run=function(e){for(var n=this._stack.length,r=0;r1&&(oe&&(r=s),o!=e);)i=r-n,s=n+Math.floor(i/2),o=this.elements[s*2];if(o==e||o>e)return s*2;if(ol?d+=2:a==l&&(n+=r[u+1]*i[d+1],u+=2,d+=2);return n},t.Vector.prototype.similarity=function(e){return this.dot(e)/this.magnitude()||0},t.Vector.prototype.toArray=function(){for(var e=new Array(this.elements.length/2),n=1,r=0;n0){var o=s.str.charAt(0),a;o in s.node.edges?a=s.node.edges[o]:(a=new t.TokenSet,s.node.edges[o]=a),s.str.length==1&&(a.final=!0),i.push({node:a,editsRemaining:s.editsRemaining,str:s.str.slice(1)})}if(s.editsRemaining!=0){if("*"in s.node.edges)var l=s.node.edges["*"];else{var l=new t.TokenSet;s.node.edges["*"]=l}if(s.str.length==0&&(l.final=!0),i.push({node:l,editsRemaining:s.editsRemaining-1,str:s.str}),s.str.length>1&&i.push({node:s.node,editsRemaining:s.editsRemaining-1,str:s.str.slice(1)}),s.str.length==1&&(s.node.final=!0),s.str.length>=1){if("*"in s.node.edges)var u=s.node.edges["*"];else{var u=new t.TokenSet;s.node.edges["*"]=u}s.str.length==1&&(u.final=!0),i.push({node:u,editsRemaining:s.editsRemaining-1,str:s.str.slice(1)})}if(s.str.length>1){var d=s.str.charAt(0),v=s.str.charAt(1),f;v in s.node.edges?f=s.node.edges[v]:(f=new t.TokenSet,s.node.edges[v]=f),s.str.length==1&&(f.final=!0),i.push({node:f,editsRemaining:s.editsRemaining-1,str:d+s.str.slice(2)})}}}return r},t.TokenSet.fromString=function(e){for(var n=new t.TokenSet,r=n,i=0,s=e.length;i=e;n--){var r=this.uncheckedNodes[n],i=r.child.toString();i in this.minimizedNodes?r.parent.edges[r.char]=this.minimizedNodes[i]:(r.child._str=i,this.minimizedNodes[i]=r.child),this.uncheckedNodes.pop()}};t.Index=function(e){this.invertedIndex=e.invertedIndex,this.fieldVectors=e.fieldVectors,this.tokenSet=e.tokenSet,this.fields=e.fields,this.pipeline=e.pipeline},t.Index.prototype.search=function(e){return this.query(function(n){var r=new t.QueryParser(e,n);r.parse()})},t.Index.prototype.query=function(e){for(var n=new t.Query(this.fields),r=Object.create(null),i=Object.create(null),s=Object.create(null),o=Object.create(null),a=Object.create(null),l=0;l1?this._b=1:this._b=e},t.Builder.prototype.k1=function(e){this._k1=e},t.Builder.prototype.add=function(e,n){var r=e[this._ref],i=Object.keys(this._fields);this._documents[r]=n||{},this.documentCount+=1;for(var s=0;s=this.length)return t.QueryLexer.EOS;var e=this.str.charAt(this.pos);return this.pos+=1,e},t.QueryLexer.prototype.width=function(){return this.pos-this.start},t.QueryLexer.prototype.ignore=function(){this.start==this.pos&&(this.pos+=1),this.start=this.pos},t.QueryLexer.prototype.backup=function(){this.pos-=1},t.QueryLexer.prototype.acceptDigitRun=function(){var e,n;do e=this.next(),n=e.charCodeAt(0);while(n>47&&n<58);e!=t.QueryLexer.EOS&&this.backup()},t.QueryLexer.prototype.more=function(){return this.pos1&&(e.backup(),e.emit(t.QueryLexer.TERM)),e.ignore(),e.more())return t.QueryLexer.lexText},t.QueryLexer.lexEditDistance=function(e){return e.ignore(),e.acceptDigitRun(),e.emit(t.QueryLexer.EDIT_DISTANCE),t.QueryLexer.lexText},t.QueryLexer.lexBoost=function(e){return e.ignore(),e.acceptDigitRun(),e.emit(t.QueryLexer.BOOST),t.QueryLexer.lexText},t.QueryLexer.lexEOS=function(e){e.width()>0&&e.emit(t.QueryLexer.TERM)},t.QueryLexer.termSeparator=t.tokenizer.separator,t.QueryLexer.lexText=function(e){for(;;){var n=e.next();if(n==t.QueryLexer.EOS)return t.QueryLexer.lexEOS;if(n.charCodeAt(0)==92){e.escapeCharacter();continue}if(n==":")return t.QueryLexer.lexField;if(n=="~")return e.backup(),e.width()>0&&e.emit(t.QueryLexer.TERM),t.QueryLexer.lexEditDistance;if(n=="^")return e.backup(),e.width()>0&&e.emit(t.QueryLexer.TERM),t.QueryLexer.lexBoost;if(n=="+"&&e.width()===1||n=="-"&&e.width()===1)return e.emit(t.QueryLexer.PRESENCE),t.QueryLexer.lexText;if(n.match(t.QueryLexer.termSeparator))return t.QueryLexer.lexTerm}},t.QueryParser=function(e,n){this.lexer=new t.QueryLexer(e),this.query=n,this.currentClause={},this.lexemeIdx=0},t.QueryParser.prototype.parse=function(){this.lexer.run(),this.lexemes=this.lexer.lexemes;for(var e=t.QueryParser.parseClause;e;)e=e(this);return this.query},t.QueryParser.prototype.peekLexeme=function(){return this.lexemes[this.lexemeIdx]},t.QueryParser.prototype.consumeLexeme=function(){var e=this.peekLexeme();return this.lexemeIdx+=1,e},t.QueryParser.prototype.nextClause=function(){var e=this.currentClause;this.query.clause(e),this.currentClause={}},t.QueryParser.parseClause=function(e){var n=e.peekLexeme();if(n!=null)switch(n.type){case t.QueryLexer.PRESENCE:return t.QueryParser.parsePresence;case t.QueryLexer.FIELD:return t.QueryParser.parseField;case t.QueryLexer.TERM:return t.QueryParser.parseTerm;default:var r="expected either a field or a term, found "+n.type;throw n.str.length>=1&&(r+=" with value '"+n.str+"'"),new t.QueryParseError(r,n.start,n.end)}},t.QueryParser.parsePresence=function(e){var n=e.consumeLexeme();if(n!=null){switch(n.str){case"-":e.currentClause.presence=t.Query.presence.PROHIBITED;break;case"+":e.currentClause.presence=t.Query.presence.REQUIRED;break;default:var r="unrecognised presence operator'"+n.str+"'";throw new t.QueryParseError(r,n.start,n.end)}var i=e.peekLexeme();if(i==null){var r="expecting term or field, found nothing";throw new t.QueryParseError(r,n.start,n.end)}switch(i.type){case t.QueryLexer.FIELD:return t.QueryParser.parseField;case t.QueryLexer.TERM:return t.QueryParser.parseTerm;default:var r="expecting term or field, found '"+i.type+"'";throw new t.QueryParseError(r,i.start,i.end)}}},t.QueryParser.parseField=function(e){var n=e.consumeLexeme();if(n!=null){if(e.query.allFields.indexOf(n.str)==-1){var r=e.query.allFields.map(function(o){return"'"+o+"'"}).join(", "),i="unrecognised field '"+n.str+"', possible fields: "+r;throw new t.QueryParseError(i,n.start,n.end)}e.currentClause.fields=[n.str];var s=e.peekLexeme();if(s==null){var i="expecting term, found nothing";throw new t.QueryParseError(i,n.start,n.end)}switch(s.type){case t.QueryLexer.TERM:return t.QueryParser.parseTerm;default:var i="expecting term, found '"+s.type+"'";throw new t.QueryParseError(i,s.start,s.end)}}},t.QueryParser.parseTerm=function(e){var n=e.consumeLexeme();if(n!=null){e.currentClause.term=n.str.toLowerCase(),n.str.indexOf("*")!=-1&&(e.currentClause.usePipeline=!1);var r=e.peekLexeme();if(r==null){e.nextClause();return}switch(r.type){case t.QueryLexer.TERM:return e.nextClause(),t.QueryParser.parseTerm;case t.QueryLexer.FIELD:return e.nextClause(),t.QueryParser.parseField;case t.QueryLexer.EDIT_DISTANCE:return t.QueryParser.parseEditDistance;case t.QueryLexer.BOOST:return t.QueryParser.parseBoost;case t.QueryLexer.PRESENCE:return e.nextClause(),t.QueryParser.parsePresence;default:var i="Unexpected lexeme type '"+r.type+"'";throw new t.QueryParseError(i,r.start,r.end)}}},t.QueryParser.parseEditDistance=function(e){var n=e.consumeLexeme();if(n!=null){var r=parseInt(n.str,10);if(isNaN(r)){var i="edit distance must be numeric";throw new t.QueryParseError(i,n.start,n.end)}e.currentClause.editDistance=r;var s=e.peekLexeme();if(s==null){e.nextClause();return}switch(s.type){case t.QueryLexer.TERM:return e.nextClause(),t.QueryParser.parseTerm;case t.QueryLexer.FIELD:return e.nextClause(),t.QueryParser.parseField;case t.QueryLexer.EDIT_DISTANCE:return t.QueryParser.parseEditDistance;case t.QueryLexer.BOOST:return t.QueryParser.parseBoost;case t.QueryLexer.PRESENCE:return e.nextClause(),t.QueryParser.parsePresence;default:var i="Unexpected lexeme type '"+s.type+"'";throw new t.QueryParseError(i,s.start,s.end)}}},t.QueryParser.parseBoost=function(e){var n=e.consumeLexeme();if(n!=null){var r=parseInt(n.str,10);if(isNaN(r)){var i="boost must be numeric";throw new t.QueryParseError(i,n.start,n.end)}e.currentClause.boost=r;var s=e.peekLexeme();if(s==null){e.nextClause();return}switch(s.type){case t.QueryLexer.TERM:return e.nextClause(),t.QueryParser.parseTerm;case t.QueryLexer.FIELD:return e.nextClause(),t.QueryParser.parseField;case t.QueryLexer.EDIT_DISTANCE:return t.QueryParser.parseEditDistance;case t.QueryLexer.BOOST:return t.QueryParser.parseBoost;case t.QueryLexer.PRESENCE:return e.nextClause(),t.QueryParser.parsePresence;default:var i="Unexpected lexeme type '"+s.type+"'";throw new t.QueryParseError(i,s.start,s.end)}}},function(e,n){typeof define=="function"&&define.amd?define(n):typeof se=="object"?oe.exports=n():e.lunr=n()}(this,function(){return t})})()});var re=[];function G(t,e){re.push({selector:e,constructor:t})}var U=class{constructor(){this.alwaysVisibleMember=null;this.createComponents(document.body),this.ensureActivePageVisible(),this.ensureFocusedElementVisible(),this.listenForCodeCopies(),window.addEventListener("hashchange",()=>this.ensureFocusedElementVisible())}createComponents(e){re.forEach(n=>{e.querySelectorAll(n.selector).forEach(r=>{r.dataset.hasInstance||(new n.constructor({el:r,app:this}),r.dataset.hasInstance=String(!0))})})}filterChanged(){this.ensureFocusedElementVisible()}ensureActivePageVisible(){let e=document.querySelector(".tsd-navigation .current"),n=e?.parentElement;for(;n&&!n.classList.contains(".tsd-navigation");)n instanceof HTMLDetailsElement&&(n.open=!0),n=n.parentElement;if(e){let r=e.getBoundingClientRect().top-document.documentElement.clientHeight/4;document.querySelector(".site-menu").scrollTop=r}}ensureFocusedElementVisible(){if(this.alwaysVisibleMember&&(this.alwaysVisibleMember.classList.remove("always-visible"),this.alwaysVisibleMember.firstElementChild.remove(),this.alwaysVisibleMember=null),!location.hash)return;let e=document.getElementById(location.hash.substring(1));if(!e)return;let n=e.parentElement;for(;n&&n.tagName!=="SECTION";)n=n.parentElement;if(n&&n.offsetParent==null){this.alwaysVisibleMember=n,n.classList.add("always-visible");let r=document.createElement("p");r.classList.add("warning"),r.textContent="This member is normally hidden due to your filter settings.",n.prepend(r)}}listenForCodeCopies(){document.querySelectorAll("pre > button").forEach(e=>{let n;e.addEventListener("click",()=>{e.previousElementSibling instanceof HTMLElement&&navigator.clipboard.writeText(e.previousElementSibling.innerText.trim()),e.textContent="Copied!",e.classList.add("visible"),clearTimeout(n),n=setTimeout(()=>{e.classList.remove("visible"),n=setTimeout(()=>{e.textContent="Copy"},100)},1e3)})})}};var ie=(t,e=100)=>{let n;return()=>{clearTimeout(n),n=setTimeout(()=>t(),e)}};var de=De(ae());async function le(t,e){if(!window.searchData)return;let n=await fetch(window.searchData),r=new Blob([await n.arrayBuffer()]).stream().pipeThrough(new DecompressionStream("gzip")),i=await new Response(r).json();t.data=i,t.index=de.Index.load(i.index),e.classList.remove("loading"),e.classList.add("ready")}function he(){let t=document.getElementById("tsd-search");if(!t)return;let e={base:t.dataset.base+"/"},n=document.getElementById("tsd-search-script");t.classList.add("loading"),n&&(n.addEventListener("error",()=>{t.classList.remove("loading"),t.classList.add("failure")}),n.addEventListener("load",()=>{le(e,t)}),le(e,t));let r=document.querySelector("#tsd-search input"),i=document.querySelector("#tsd-search .results");if(!r||!i)throw new Error("The input field or the result list wrapper was not found");let s=!1;i.addEventListener("mousedown",()=>s=!0),i.addEventListener("mouseup",()=>{s=!1,t.classList.remove("has-focus")}),r.addEventListener("focus",()=>t.classList.add("has-focus")),r.addEventListener("blur",()=>{s||(s=!1,t.classList.remove("has-focus"))}),Ae(t,i,r,e)}function Ae(t,e,n,r){n.addEventListener("input",ie(()=>{Ne(t,e,n,r)},200));let i=!1;n.addEventListener("keydown",s=>{i=!0,s.key=="Enter"?Ve(e,n):s.key=="Escape"?n.blur():s.key=="ArrowUp"?ue(e,-1):s.key==="ArrowDown"?ue(e,1):i=!1}),n.addEventListener("keypress",s=>{i&&s.preventDefault()}),document.body.addEventListener("keydown",s=>{s.altKey||s.ctrlKey||s.metaKey||!n.matches(":focus")&&s.key==="/"&&(n.focus(),s.preventDefault())})}function Ne(t,e,n,r){if(!r.index||!r.data)return;e.textContent="";let i=n.value.trim(),s;if(i){let o=i.split(" ").map(a=>a.length?`*${a}*`:"").join(" ");s=r.index.search(o)}else s=[];for(let o=0;oa.score-o.score);for(let o=0,a=Math.min(10,s.length);o`,d=ce(l.name,i);globalThis.DEBUG_SEARCH_WEIGHTS&&(d+=` (score: ${s[o].score.toFixed(2)})`),l.parent&&(d=` + ${ce(l.parent,i)}.${d}`);let v=document.createElement("li");v.classList.value=l.classes??"";let f=document.createElement("a");f.href=r.base+l.url,f.innerHTML=u+d,v.append(f),e.appendChild(v)}}function ue(t,e){let n=t.querySelector(".current");if(!n)n=t.querySelector(e==1?"li:first-child":"li:last-child"),n&&n.classList.add("current");else{let r=n;if(e===1)do r=r.nextElementSibling??void 0;while(r instanceof HTMLElement&&r.offsetParent==null);else do r=r.previousElementSibling??void 0;while(r instanceof HTMLElement&&r.offsetParent==null);r&&(n.classList.remove("current"),r.classList.add("current"))}}function Ve(t,e){let n=t.querySelector(".current");if(n||(n=t.querySelector("li:first-child")),n){let r=n.querySelector("a");r&&(window.location.href=r.href),e.blur()}}function ce(t,e){if(e==="")return t;let n=t.toLocaleLowerCase(),r=e.toLocaleLowerCase(),i=[],s=0,o=n.indexOf(r);for(;o!=-1;)i.push(K(t.substring(s,o)),`${K(t.substring(o,o+r.length))}`),s=o+r.length,o=n.indexOf(r,s);return i.push(K(t.substring(s))),i.join("")}var Be={"&":"&","<":"<",">":">","'":"'",'"':"""};function K(t){return t.replace(/[&<>"'"]/g,e=>Be[e])}var C=class{constructor(e){this.el=e.el,this.app=e.app}};var F="mousedown",pe="mousemove",B="mouseup",J={x:0,y:0},fe=!1,ee=!1,He=!1,D=!1,me=/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);document.documentElement.classList.add(me?"is-mobile":"not-mobile");me&&"ontouchstart"in document.documentElement&&(He=!0,F="touchstart",pe="touchmove",B="touchend");document.addEventListener(F,t=>{ee=!0,D=!1;let e=F=="touchstart"?t.targetTouches[0]:t;J.y=e.pageY||0,J.x=e.pageX||0});document.addEventListener(pe,t=>{if(ee&&!D){let e=F=="touchstart"?t.targetTouches[0]:t,n=J.x-(e.pageX||0),r=J.y-(e.pageY||0);D=Math.sqrt(n*n+r*r)>10}});document.addEventListener(B,()=>{ee=!1});document.addEventListener("click",t=>{fe&&(t.preventDefault(),t.stopImmediatePropagation(),fe=!1)});var X=class extends C{constructor(n){super(n);this.className=this.el.dataset.toggle||"",this.el.addEventListener(B,r=>this.onPointerUp(r)),this.el.addEventListener("click",r=>r.preventDefault()),document.addEventListener(F,r=>this.onDocumentPointerDown(r)),document.addEventListener(B,r=>this.onDocumentPointerUp(r))}setActive(n){if(this.active==n)return;this.active=n,document.documentElement.classList.toggle("has-"+this.className,n),this.el.classList.toggle("active",n);let r=(this.active?"to-has-":"from-has-")+this.className;document.documentElement.classList.add(r),setTimeout(()=>document.documentElement.classList.remove(r),500)}onPointerUp(n){D||(this.setActive(!0),n.preventDefault())}onDocumentPointerDown(n){if(this.active){if(n.target.closest(".col-sidebar, .tsd-filter-group"))return;this.setActive(!1)}}onDocumentPointerUp(n){if(!D&&this.active&&n.target.closest(".col-sidebar")){let r=n.target.closest("a");if(r){let i=window.location.href;i.indexOf("#")!=-1&&(i=i.substring(0,i.indexOf("#"))),r.href.substring(0,i.length)==i&&setTimeout(()=>this.setActive(!1),250)}}}};var te;try{te=localStorage}catch{te={getItem(){return null},setItem(){}}}var Q=te;var ve=document.head.appendChild(document.createElement("style"));ve.dataset.for="filters";var Y=class extends C{constructor(n){super(n);this.key=`filter-${this.el.name}`,this.value=this.el.checked,this.el.addEventListener("change",()=>{this.setLocalStorage(this.el.checked)}),this.setLocalStorage(this.fromLocalStorage()),ve.innerHTML+=`html:not(.${this.key}) .tsd-is-${this.el.name} { display: none; } +`}fromLocalStorage(){let n=Q.getItem(this.key);return n?n==="true":this.el.checked}setLocalStorage(n){Q.setItem(this.key,n.toString()),this.value=n,this.handleValueChange()}handleValueChange(){this.el.checked=this.value,document.documentElement.classList.toggle(this.key,this.value),this.app.filterChanged(),document.querySelectorAll(".tsd-index-section").forEach(n=>{n.style.display="block";let r=Array.from(n.querySelectorAll(".tsd-index-link")).every(i=>i.offsetParent==null);n.style.display=r?"none":"block"})}};var Z=class extends C{constructor(n){super(n);this.summary=this.el.querySelector(".tsd-accordion-summary"),this.icon=this.summary.querySelector("svg"),this.key=`tsd-accordion-${this.summary.dataset.key??this.summary.textContent.trim().replace(/\s+/g,"-").toLowerCase()}`;let r=Q.getItem(this.key);this.el.open=r?r==="true":this.el.open,this.el.addEventListener("toggle",()=>this.update());let i=this.summary.querySelector("a");i&&i.addEventListener("click",()=>{location.assign(i.href)}),this.update()}update(){this.icon.style.transform=`rotate(${this.el.open?0:-90}deg)`,Q.setItem(this.key,this.el.open.toString())}};function ge(t){let e=Q.getItem("tsd-theme")||"os";t.value=e,ye(e),t.addEventListener("change",()=>{Q.setItem("tsd-theme",t.value),ye(t.value)})}function ye(t){document.documentElement.dataset.theme=t}var Le;function be(){let t=document.getElementById("tsd-nav-script");t&&(t.addEventListener("load",xe),xe())}async function xe(){let t=document.getElementById("tsd-nav-container");if(!t||!window.navigationData)return;let n=await(await fetch(window.navigationData)).arrayBuffer(),r=new Blob([n]).stream().pipeThrough(new DecompressionStream("gzip")),i=await new Response(r).json();Le=t.dataset.base+"/",t.innerHTML="";for(let s of i)we(s,t,[]);window.app.createComponents(t),window.app.ensureActivePageVisible()}function we(t,e,n){let r=e.appendChild(document.createElement("li"));if(t.children){let i=[...n,t.text],s=r.appendChild(document.createElement("details"));s.className=t.class?`${t.class} tsd-index-accordion`:"tsd-index-accordion",s.dataset.key=i.join("$");let o=s.appendChild(document.createElement("summary"));o.className="tsd-accordion-summary",o.innerHTML='',Ee(t,o);let a=s.appendChild(document.createElement("div"));a.className="tsd-accordion-details";let l=a.appendChild(document.createElement("ul"));l.className="tsd-nested-navigation";for(let u of t.children)we(u,l,i)}else Ee(t,r,t.class)}function Ee(t,e,n){if(t.path){let r=e.appendChild(document.createElement("a"));r.href=Le+t.path,n&&(r.className=n),location.href===r.href&&r.classList.add("current"),t.kind&&(r.innerHTML=``),r.appendChild(document.createElement("span")).textContent=t.text}else e.appendChild(document.createElement("span")).textContent=t.text}G(X,"a[data-toggle]");G(Z,".tsd-index-accordion");G(Y,".tsd-filter-item input[type=checkbox]");var Se=document.getElementById("tsd-theme");Se&&ge(Se);var je=new U;Object.defineProperty(window,"app",{value:je});he();be();})(); +/*! Bundled license information: + +lunr/lunr.js: + (** + * lunr - http://lunrjs.com - A bit like Solr, but much smaller and not as bright - 2.3.9 + * Copyright (C) 2020 Oliver Nightingale + * @license MIT + *) + (*! + * lunr.utils + * Copyright (C) 2020 Oliver Nightingale + *) + (*! + * lunr.Set + * Copyright (C) 2020 Oliver Nightingale + *) + (*! + * lunr.tokenizer + * Copyright (C) 2020 Oliver Nightingale + *) + (*! + * lunr.Pipeline + * Copyright (C) 2020 Oliver Nightingale + *) + (*! + * lunr.Vector + * Copyright (C) 2020 Oliver Nightingale + *) + (*! + * lunr.stemmer + * Copyright (C) 2020 Oliver Nightingale + * Includes code from - http://tartarus.org/~martin/PorterStemmer/js.txt + *) + (*! + * lunr.stopWordFilter + * Copyright (C) 2020 Oliver Nightingale + *) + (*! + * lunr.trimmer + * Copyright (C) 2020 Oliver Nightingale + *) + (*! + * lunr.TokenSet + * Copyright (C) 2020 Oliver Nightingale + *) + (*! + * lunr.Index + * Copyright (C) 2020 Oliver Nightingale + *) + (*! + * lunr.Builder + * Copyright (C) 2020 Oliver Nightingale + *) +*/ diff --git a/docs/assets/navigation.js b/docs/assets/navigation.js new file mode 100644 index 00000000..f6a25e26 --- /dev/null +++ b/docs/assets/navigation.js @@ -0,0 +1 @@ +window.navigationData = "data:application/octet-stream;base64,H4sIAAAAAAAACq2WUW+bMBDHv8rEXsPSpGmn5nVSK/VhqkakPVRR5BineHUA2Ue6aup3n2NDAdsYp80Tsvnf/3d35oDHfxGQvxAtI8woyWGKC1bwWLxQwFlvEU2iEkEmlfsirRgRUx2xUaKNFvUW3zLYMxn2TPM0Ws4nEc4oSznJo+XjO/bHMSBR+gdelKLF0BwI3yEcQjJdDPTV9dvERWxhuyrHQIv8NFYfc714W3c4dUN3BcckrjuJM7Injq3B5ippw1dSx1ZQo2+PYTp3A2nVHgY1DcObAZ0uQED50EkBTit4FVSqDWiDQ8pSMfWcEG4sB4vT1EZmLINKVAkmdcTo+Ph5tpdviHpqT39PYFqNbmmVIOcBmkbewxWEH+Rp5nL1R0z1KhY0JfELR2Upbzn27NPWoo222dSrY8imDnHtBR3/T3m5F4mKXiH+ROCc9K9Oe53QYnazuLzoHlEtTn4FPpMfy8tD8T2tuoZEOv3WRufOyw3wpaReMOkDeuq8neC1/HAGrZ9Bvbj5PruaO07qbnSkPndGd6HTbTXvfLlY1v6Bh4I7vkVqO2ggm9fLkEdzv2+2cJulRAAvXp3N6LvVSrM2acuQEMqq5AQjIOkXEGlMRSwRhOeIRZ3y5YAnIEUBxEY6jPRwRDhHfIpTbQXmdBsEarQnkNbWT6X6D1rJKbZmWtEM0dig6vk5Rg5b9jVjjjSnQBEzun9AnKJt+5R2VX3Hy7njozze3XjmHbsKKBP2yKjtoLHjRBTsoFm3vNiP/OVqY0+QI9v1f34BAjApDQAA" \ No newline at end of file diff --git a/docs/assets/search.js b/docs/assets/search.js new file mode 100644 index 00000000..917ac47d --- /dev/null +++ b/docs/assets/search.js @@ -0,0 +1 @@ +window.searchData = "data:application/octet-stream;base64,H4sIAAAAAAAACsVaS4/iRhD+L56rYeiHDcw10kbJIVqFUXIYjRABM+Osecj27CYZzX9PPwyuclcbwxr2hk3VV4+vqtrd9nuQ774VwcPTe/Al3a6CBx4G28UmCR6CZZYm2/J+uct2+aD4lpbLV3QRhMFbninBzW71liXFvVWYG5m5lUEXw9dykymtZbYoikQZDYKP8GA3lkfDP2mdGbaxftsuy3S37WAFqBMWw2C/yBVAlwBr73gUU+59znf74uhjui2TfL1YdklFE6Q3T9mI15ks0v+S/ty7q+Au89HBhOltFt16ly+TQaW+fE02CXHLV4BG8hCPkSRudS3GT1rTuo6NOhXZzWwTrxPx3dJxMp8l0CxPZ7AEMZRn5+yxS7ZcE7XuGZlxA2vJhRGoijLJG5e+jFhHD1KNy655MWHNmpac1LTbQiCdctQeMOnpW5H04mwTp1d/4VBGVk6N5TMS3H04d/UaDWhTsivcKj35e4exL/edMNAeDjUt+w0KW7hJaOUif0nKWZIly3KX9x6XA3+toOpxWCT5V6W8Tf4p/y7u7dWgSFfJ4Fu+2O/VX8Q9Zz5amblFmVdXWmNeaVD3ug7M3xTqr8Vs9vOpYXSZFzR8e7dfljUyupkRnCm5PxvJ/d7AHOTrxsRH0zGLOF7/V58XL3X/l//uLy6WGu7KYYD15FAav3dbWL6v/ggj140UTbbla5qtFPDt4roDJnsMsM2uf6y/3DBua+0Hh7w+ttMNS/kOW719CiSbSjFylhaD92gW3x6XtjsS/fpTy5n7PQ8sGv+Gs6rXdm2J5gqd6uHmZkO5LVpyHpfFapAWg3Sruiktk9WtU3CVOdWWBd+I+gGJAE/pajvgntOYu61P0c1nMrBlelTPYs0HM4PXkDnR18Yxv0E7jbWQ1x4WOc9cHEWiHnzzeXmGkbujeIuthqJ3IqFtbjfDw7J150qqVy57vFgt8i+Pl3gCFXvzJktfXsuL3EGavfmzrOv6c56sz3XKVe/NM+r8p6NXXY53LvaIOsI5y68uJzTdvBP1SEm3aZkuslm5KGu3vi7ydPFXPRSh0JkjxT3/pHbkxspBYMDOs9FiAs/2w99nDuEavkyzwsE2d7uevuRJscu+Wjc+5btN+1sQC92i0x6J9ffjOVQsr5J/gof3QC2RhYJWf/KhGE6V9DpNspV+W2ldVFi7zUbrP1f//WGOz7SEFbkfBeHTKOR8yMdxyA4/ePXj+Tl8OmAYUXPDKDJ1JUIxHkYxQ2IMiXF1JSkxjsSEuoooMYHEpLpSboqhFNNwHPJ4yEZROAlZNJwIEU6rHwhBIoRIXbERZSlCcrG1NBlORwr+mBjGq3tINUaqY22CTM0YyU20nDwiR8dfMZX9CdKdat0xZWOKWdKksQnJU4NPzRubkpKYUqap4yqHbDiZcCyJWWWaPc5ISUws0yxxTlrHBDLNExcHytVkrqqAR8d7MVUHDBPMNGmcTCHDfDJNG6dziBllmiRO5xDzxzRNgqxDhhnkmiZB5pBjBrlpSU5KNppS06QSRUliBrmmSdANjBnkmiZB9jDHDPLI7yfmiMf+2DFHfOyPCHPENRHqyZjyE3PEDUdkhXDMkTAckRUiMEfCcERWiMAcCU0EI7MkGrNTEyHJWhKYI6GJkIyUxBwJTYQk+1FgjkTsnQYCcyTG3mkgMEdCEyHJESowR0ITISWJiTmSI6+kxBxJTYQkK1lijqRZ3chakpYjs1yrdVrtin+xy7ZaeA+7q/dgXq3lqiKqh4r3QNXBw/vHR7126ysDfTyEAIqsVlTjQImGgWoNDwD4AgWCjGqMUbuqeXaFqnGtKq31E8arnV2NwGQNMfHpNj0eN8z6dOyHH3uzKam1JQfZjk7rO2wB82oStOlXH2kB3VrVy3OtubfHk8B1YNmjrnesTpYl4FgNBVrTsAviRjQBAF/K7M7GA8BBpTJha0W1fRvS3rwgAxCgS5ivVmpVlDgBEs951Sjt5p0kcpADVmEIX70bDLfagRs+69UGrbC7OMAh0BW+8M0BgUs/SL7wdYw9o7PHcWV1Jg8SCEvPV0EVRPFiPKi/GQI5BL3DfLk7wOQIxmkGAfnw9WG14TJIa7Xh8pSnhJPM11qu2vT0IILfo0HVSQdV4vAUJRNOE19XWjV9vHr8RAEgAC+YryAdBJeJCBSHNxoFgGzLLt6bTyprJWDIV4TViTDwDnDLfY3jjmp+elmEn3GiNu+qitlg8em1EH/UgrSj09rmtQ3IDIiRs2oq+qiwM6E4foIDMgVgmI9+11+gFVfT1Nd5Jd1DjDUgfKqmJpx1HBS/8PHknWQMTDLf8GmfXwyuZ76ngbfCXUUk6BwxtamTvgAOAGQMsP29APakDJgHhSZ9flPDJu7Q8Pi1EFKPTqmrp+19uk+ydKuEnp4/Pv4HqOclO74vAAA="; \ No newline at end of file diff --git a/docs/assets/style.css b/docs/assets/style.css new file mode 100644 index 00000000..07a385b7 --- /dev/null +++ b/docs/assets/style.css @@ -0,0 +1,1394 @@ +:root { + /* Light */ + --light-color-background: #f2f4f8; + --light-color-background-secondary: #eff0f1; + --light-color-warning-text: #222; + --light-color-background-warning: #e6e600; + --light-color-icon-background: var(--light-color-background); + --light-color-accent: #c5c7c9; + --light-color-active-menu-item: var(--light-color-accent); + --light-color-text: #222; + --light-color-text-aside: #6e6e6e; + --light-color-link: #1f70c2; + + --light-color-ts-keyword: #056bd6; + --light-color-ts-project: #b111c9; + --light-color-ts-module: var(--light-color-ts-project); + --light-color-ts-namespace: var(--light-color-ts-project); + --light-color-ts-enum: #7e6f15; + --light-color-ts-enum-member: var(--light-color-ts-enum); + --light-color-ts-variable: #4760ec; + --light-color-ts-function: #572be7; + --light-color-ts-class: #1f70c2; + --light-color-ts-interface: #108024; + --light-color-ts-constructor: var(--light-color-ts-class); + --light-color-ts-property: var(--light-color-ts-variable); + --light-color-ts-method: var(--light-color-ts-function); + --light-color-ts-call-signature: var(--light-color-ts-method); + --light-color-ts-index-signature: var(--light-color-ts-property); + --light-color-ts-constructor-signature: var(--light-color-ts-constructor); + --light-color-ts-parameter: var(--light-color-ts-variable); + /* type literal not included as links will never be generated to it */ + --light-color-ts-type-parameter: var(--light-color-ts-type-alias); + --light-color-ts-accessor: var(--light-color-ts-property); + --light-color-ts-get-signature: var(--light-color-ts-accessor); + --light-color-ts-set-signature: var(--light-color-ts-accessor); + --light-color-ts-type-alias: #d51270; + /* reference not included as links will be colored with the kind that it points to */ + + --light-external-icon: url("data:image/svg+xml;utf8,"); + --light-color-scheme: light; + + /* Dark */ + --dark-color-background: #2b2e33; + --dark-color-background-secondary: #1e2024; + --dark-color-background-warning: #bebe00; + --dark-color-warning-text: #222; + --dark-color-icon-background: var(--dark-color-background-secondary); + --dark-color-accent: #9096a2; + --dark-color-active-menu-item: #5d5d6a; + --dark-color-text: #f5f5f5; + --dark-color-text-aside: #dddddd; + --dark-color-link: #00aff4; + + --dark-color-ts-keyword: #3399ff; + --dark-color-ts-project: #e358ff; + --dark-color-ts-module: var(--dark-color-ts-project); + --dark-color-ts-namespace: var(--dark-color-ts-project); + --dark-color-ts-enum: #f4d93e; + --dark-color-ts-enum-member: var(--dark-color-ts-enum); + --dark-color-ts-variable: #798dff; + --dark-color-ts-function: #a280ff; + --dark-color-ts-class: #8ac4ff; + --dark-color-ts-interface: #6cff87; + --dark-color-ts-constructor: var(--dark-color-ts-class); + --dark-color-ts-property: var(--dark-color-ts-variable); + --dark-color-ts-method: var(--dark-color-ts-function); + --dark-color-ts-call-signature: var(--dark-color-ts-method); + --dark-color-ts-index-signature: var(--dark-color-ts-property); + --dark-color-ts-constructor-signature: var(--dark-color-ts-constructor); + --dark-color-ts-parameter: var(--dark-color-ts-variable); + /* type literal not included as links will never be generated to it */ + --dark-color-ts-type-parameter: var(--dark-color-ts-type-alias); + --dark-color-ts-accessor: var(--dark-color-ts-property); + --dark-color-ts-get-signature: var(--dark-color-ts-accessor); + --dark-color-ts-set-signature: var(--dark-color-ts-accessor); + --dark-color-ts-type-alias: #ff6492; + /* reference not included as links will be colored with the kind that it points to */ + + --dark-external-icon: url("data:image/svg+xml;utf8,"); + --dark-color-scheme: dark; +} + +@media (prefers-color-scheme: light) { + :root { + --color-background: var(--light-color-background); + --color-background-secondary: var(--light-color-background-secondary); + --color-background-warning: var(--light-color-background-warning); + --color-warning-text: var(--light-color-warning-text); + --color-icon-background: var(--light-color-icon-background); + --color-accent: var(--light-color-accent); + --color-active-menu-item: var(--light-color-active-menu-item); + --color-text: var(--light-color-text); + --color-text-aside: var(--light-color-text-aside); + --color-link: var(--light-color-link); + + --color-ts-keyword: var(--light-color-ts-keyword); + --color-ts-module: var(--light-color-ts-module); + --color-ts-namespace: var(--light-color-ts-namespace); + --color-ts-enum: var(--light-color-ts-enum); + --color-ts-enum-member: var(--light-color-ts-enum-member); + --color-ts-variable: var(--light-color-ts-variable); + --color-ts-function: var(--light-color-ts-function); + --color-ts-class: var(--light-color-ts-class); + --color-ts-interface: var(--light-color-ts-interface); + --color-ts-constructor: var(--light-color-ts-constructor); + --color-ts-property: var(--light-color-ts-property); + --color-ts-method: var(--light-color-ts-method); + --color-ts-call-signature: var(--light-color-ts-call-signature); + --color-ts-index-signature: var(--light-color-ts-index-signature); + --color-ts-constructor-signature: var( + --light-color-ts-constructor-signature + ); + --color-ts-parameter: var(--light-color-ts-parameter); + --color-ts-type-parameter: var(--light-color-ts-type-parameter); + --color-ts-accessor: var(--light-color-ts-accessor); + --color-ts-get-signature: var(--light-color-ts-get-signature); + --color-ts-set-signature: var(--light-color-ts-set-signature); + --color-ts-type-alias: var(--light-color-ts-type-alias); + + --external-icon: var(--light-external-icon); + --color-scheme: var(--light-color-scheme); + } +} + +@media (prefers-color-scheme: dark) { + :root { + --color-background: var(--dark-color-background); + --color-background-secondary: var(--dark-color-background-secondary); + --color-background-warning: var(--dark-color-background-warning); + --color-warning-text: var(--dark-color-warning-text); + --color-icon-background: var(--dark-color-icon-background); + --color-accent: var(--dark-color-accent); + --color-active-menu-item: var(--dark-color-active-menu-item); + --color-text: var(--dark-color-text); + --color-text-aside: var(--dark-color-text-aside); + --color-link: var(--dark-color-link); + + --color-ts-keyword: var(--dark-color-ts-keyword); + --color-ts-module: var(--dark-color-ts-module); + --color-ts-namespace: var(--dark-color-ts-namespace); + --color-ts-enum: var(--dark-color-ts-enum); + --color-ts-enum-member: var(--dark-color-ts-enum-member); + --color-ts-variable: var(--dark-color-ts-variable); + --color-ts-function: var(--dark-color-ts-function); + --color-ts-class: var(--dark-color-ts-class); + --color-ts-interface: var(--dark-color-ts-interface); + --color-ts-constructor: var(--dark-color-ts-constructor); + --color-ts-property: var(--dark-color-ts-property); + --color-ts-method: var(--dark-color-ts-method); + --color-ts-call-signature: var(--dark-color-ts-call-signature); + --color-ts-index-signature: var(--dark-color-ts-index-signature); + --color-ts-constructor-signature: var( + --dark-color-ts-constructor-signature + ); + --color-ts-parameter: var(--dark-color-ts-parameter); + --color-ts-type-parameter: var(--dark-color-ts-type-parameter); + --color-ts-accessor: var(--dark-color-ts-accessor); + --color-ts-get-signature: var(--dark-color-ts-get-signature); + --color-ts-set-signature: var(--dark-color-ts-set-signature); + --color-ts-type-alias: var(--dark-color-ts-type-alias); + + --external-icon: var(--dark-external-icon); + --color-scheme: var(--dark-color-scheme); + } +} + +html { + color-scheme: var(--color-scheme); +} + +body { + margin: 0; +} + +:root[data-theme="light"] { + --color-background: var(--light-color-background); + --color-background-secondary: var(--light-color-background-secondary); + --color-background-warning: var(--light-color-background-warning); + --color-warning-text: var(--light-color-warning-text); + --color-icon-background: var(--light-color-icon-background); + --color-accent: var(--light-color-accent); + --color-active-menu-item: var(--light-color-active-menu-item); + --color-text: var(--light-color-text); + --color-text-aside: var(--light-color-text-aside); + --color-link: var(--light-color-link); + + --color-ts-keyword: var(--light-color-ts-keyword); + --color-ts-module: var(--light-color-ts-module); + --color-ts-namespace: var(--light-color-ts-namespace); + --color-ts-enum: var(--light-color-ts-enum); + --color-ts-enum-member: var(--light-color-ts-enum-member); + --color-ts-variable: var(--light-color-ts-variable); + --color-ts-function: var(--light-color-ts-function); + --color-ts-class: var(--light-color-ts-class); + --color-ts-interface: var(--light-color-ts-interface); + --color-ts-constructor: var(--light-color-ts-constructor); + --color-ts-property: var(--light-color-ts-property); + --color-ts-method: var(--light-color-ts-method); + --color-ts-call-signature: var(--light-color-ts-call-signature); + --color-ts-index-signature: var(--light-color-ts-index-signature); + --color-ts-constructor-signature: var( + --light-color-ts-constructor-signature + ); + --color-ts-parameter: var(--light-color-ts-parameter); + --color-ts-type-parameter: var(--light-color-ts-type-parameter); + --color-ts-accessor: var(--light-color-ts-accessor); + --color-ts-get-signature: var(--light-color-ts-get-signature); + --color-ts-set-signature: var(--light-color-ts-set-signature); + --color-ts-type-alias: var(--light-color-ts-type-alias); + + --external-icon: var(--light-external-icon); + --color-scheme: var(--light-color-scheme); +} + +:root[data-theme="dark"] { + --color-background: var(--dark-color-background); + --color-background-secondary: var(--dark-color-background-secondary); + --color-background-warning: var(--dark-color-background-warning); + --color-warning-text: var(--dark-color-warning-text); + --color-icon-background: var(--dark-color-icon-background); + --color-accent: var(--dark-color-accent); + --color-active-menu-item: var(--dark-color-active-menu-item); + --color-text: var(--dark-color-text); + --color-text-aside: var(--dark-color-text-aside); + --color-link: var(--dark-color-link); + + --color-ts-keyword: var(--dark-color-ts-keyword); + --color-ts-module: var(--dark-color-ts-module); + --color-ts-namespace: var(--dark-color-ts-namespace); + --color-ts-enum: var(--dark-color-ts-enum); + --color-ts-enum-member: var(--dark-color-ts-enum-member); + --color-ts-variable: var(--dark-color-ts-variable); + --color-ts-function: var(--dark-color-ts-function); + --color-ts-class: var(--dark-color-ts-class); + --color-ts-interface: var(--dark-color-ts-interface); + --color-ts-constructor: var(--dark-color-ts-constructor); + --color-ts-property: var(--dark-color-ts-property); + --color-ts-method: var(--dark-color-ts-method); + --color-ts-call-signature: var(--dark-color-ts-call-signature); + --color-ts-index-signature: var(--dark-color-ts-index-signature); + --color-ts-constructor-signature: var( + --dark-color-ts-constructor-signature + ); + --color-ts-parameter: var(--dark-color-ts-parameter); + --color-ts-type-parameter: var(--dark-color-ts-type-parameter); + --color-ts-accessor: var(--dark-color-ts-accessor); + --color-ts-get-signature: var(--dark-color-ts-get-signature); + --color-ts-set-signature: var(--dark-color-ts-set-signature); + --color-ts-type-alias: var(--dark-color-ts-type-alias); + + --external-icon: var(--dark-external-icon); + --color-scheme: var(--dark-color-scheme); +} + +.always-visible, +.always-visible .tsd-signatures { + display: inherit !important; +} + +h1, +h2, +h3, +h4, +h5, +h6 { + line-height: 1.2; +} + +h1 > a, +h2 > a, +h3 > a, +h4 > a, +h5 > a, +h6 > a { + text-decoration: none; + color: var(--color-text); +} + +h1 { + font-size: 1.875rem; + margin: 0.67rem 0; +} + +h2 { + font-size: 1.5rem; + margin: 0.83rem 0; +} + +h3 { + font-size: 1.25rem; + margin: 1rem 0; +} + +h4 { + font-size: 1.05rem; + margin: 1.33rem 0; +} + +h5 { + font-size: 1rem; + margin: 1.5rem 0; +} + +h6 { + font-size: 0.875rem; + margin: 2.33rem 0; +} + +.uppercase { + text-transform: uppercase; +} + +dl, +menu, +ol, +ul { + margin: 1em 0; +} + +dd { + margin: 0 0 0 40px; +} + +.container { + max-width: 1700px; + padding: 0 2rem; +} + +/* Footer */ +.tsd-generator { + border-top: 1px solid var(--color-accent); + padding-top: 1rem; + padding-bottom: 1rem; + max-height: 3.5rem; +} + +.tsd-generator > p { + margin-top: 0; + margin-bottom: 0; + padding: 0 1rem; +} + +.container-main { + margin: 0 auto; + /* toolbar, footer, margin */ + min-height: calc(100vh - 41px - 56px - 4rem); +} + +@keyframes fade-in { + from { + opacity: 0; + } + to { + opacity: 1; + } +} +@keyframes fade-out { + from { + opacity: 1; + visibility: visible; + } + to { + opacity: 0; + } +} +@keyframes fade-in-delayed { + 0% { + opacity: 0; + } + 33% { + opacity: 0; + } + 100% { + opacity: 1; + } +} +@keyframes fade-out-delayed { + 0% { + opacity: 1; + visibility: visible; + } + 66% { + opacity: 0; + } + 100% { + opacity: 0; + } +} +@keyframes pop-in-from-right { + from { + transform: translate(100%, 0); + } + to { + transform: translate(0, 0); + } +} +@keyframes pop-out-to-right { + from { + transform: translate(0, 0); + visibility: visible; + } + to { + transform: translate(100%, 0); + } +} +body { + background: var(--color-background); + font-family: "Segoe UI", sans-serif; + font-size: 16px; + color: var(--color-text); +} + +a { + color: var(--color-link); + text-decoration: none; +} +a:hover { + text-decoration: underline; +} +a.external[target="_blank"] { + background-image: var(--external-icon); + background-position: top 3px right; + background-repeat: no-repeat; + padding-right: 13px; +} + +code, +pre { + font-family: Menlo, Monaco, Consolas, "Courier New", monospace; + padding: 0.2em; + margin: 0; + font-size: 0.875rem; + border-radius: 0.8em; +} + +pre { + position: relative; + white-space: pre; + white-space: pre-wrap; + word-wrap: break-word; + padding: 10px; + border: 1px solid var(--color-accent); +} +pre code { + padding: 0; + font-size: 100%; +} +pre > button { + position: absolute; + top: 10px; + right: 10px; + opacity: 0; + transition: opacity 0.1s; + box-sizing: border-box; +} +pre:hover > button, +pre > button.visible { + opacity: 1; +} + +blockquote { + margin: 1em 0; + padding-left: 1em; + border-left: 4px solid gray; +} + +.tsd-typography { + line-height: 1.333em; +} +.tsd-typography ul { + list-style: square; + padding: 0 0 0 20px; + margin: 0; +} +.tsd-typography .tsd-index-panel h3, +.tsd-index-panel .tsd-typography h3, +.tsd-typography h4, +.tsd-typography h5, +.tsd-typography h6 { + font-size: 1em; +} +.tsd-typography h5, +.tsd-typography h6 { + font-weight: normal; +} +.tsd-typography p, +.tsd-typography ul, +.tsd-typography ol { + margin: 1em 0; +} +.tsd-typography table { + border-collapse: collapse; + border: none; +} +.tsd-typography td, +.tsd-typography th { + padding: 6px 13px; + border: 1px solid var(--color-accent); +} +.tsd-typography thead, +.tsd-typography tr:nth-child(even) { + background-color: var(--color-background-secondary); +} + +.tsd-breadcrumb { + margin: 0; + padding: 0; + color: var(--color-text-aside); +} +.tsd-breadcrumb a { + color: var(--color-text-aside); + text-decoration: none; +} +.tsd-breadcrumb a:hover { + text-decoration: underline; +} +.tsd-breadcrumb li { + display: inline; +} +.tsd-breadcrumb li:after { + content: " / "; +} + +.tsd-comment-tags { + display: flex; + flex-direction: column; +} +dl.tsd-comment-tag-group { + display: flex; + align-items: center; + overflow: hidden; + margin: 0.5em 0; +} +dl.tsd-comment-tag-group dt { + display: flex; + margin-right: 0.5em; + font-size: 0.875em; + font-weight: normal; +} +dl.tsd-comment-tag-group dd { + margin: 0; +} +code.tsd-tag { + padding: 0.25em 0.4em; + border: 0.1em solid var(--color-accent); + margin-right: 0.25em; + font-size: 70%; +} +h1 code.tsd-tag:first-of-type { + margin-left: 0.25em; +} + +dl.tsd-comment-tag-group dd:before, +dl.tsd-comment-tag-group dd:after { + content: " "; +} +dl.tsd-comment-tag-group dd pre, +dl.tsd-comment-tag-group dd:after { + clear: both; +} +dl.tsd-comment-tag-group p { + margin: 0; +} + +.tsd-panel.tsd-comment .lead { + font-size: 1.1em; + line-height: 1.333em; + margin-bottom: 2em; +} +.tsd-panel.tsd-comment .lead:last-child { + margin-bottom: 0; +} + +.tsd-filter-visibility h4 { + font-size: 1rem; + padding-top: 0.75rem; + padding-bottom: 0.5rem; + margin: 0; +} +.tsd-filter-item:not(:last-child) { + margin-bottom: 0.5rem; +} +.tsd-filter-input { + display: flex; + width: fit-content; + width: -moz-fit-content; + align-items: center; + user-select: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + cursor: pointer; +} +.tsd-filter-input input[type="checkbox"] { + cursor: pointer; + position: absolute; + width: 1.5em; + height: 1.5em; + opacity: 0; +} +.tsd-filter-input input[type="checkbox"]:disabled { + pointer-events: none; +} +.tsd-filter-input svg { + cursor: pointer; + width: 1.5em; + height: 1.5em; + margin-right: 0.5em; + border-radius: 0.33em; + /* Leaving this at full opacity breaks event listeners on Firefox. + Don't remove unless you know what you're doing. */ + opacity: 0.99; +} +.tsd-filter-input input[type="checkbox"]:focus + svg { + transform: scale(0.95); +} +.tsd-filter-input input[type="checkbox"]:focus:not(:focus-visible) + svg { + transform: scale(1); +} +.tsd-checkbox-background { + fill: var(--color-accent); +} +input[type="checkbox"]:checked ~ svg .tsd-checkbox-checkmark { + stroke: var(--color-text); +} +.tsd-filter-input input:disabled ~ svg > .tsd-checkbox-background { + fill: var(--color-background); + stroke: var(--color-accent); + stroke-width: 0.25rem; +} +.tsd-filter-input input:disabled ~ svg > .tsd-checkbox-checkmark { + stroke: var(--color-accent); +} + +.tsd-theme-toggle { + padding-top: 0.75rem; +} +.tsd-theme-toggle > h4 { + display: inline; + vertical-align: middle; + margin-right: 0.75rem; +} + +.tsd-hierarchy { + list-style: square; + margin: 0; +} +.tsd-hierarchy .target { + font-weight: bold; +} + +.tsd-panel-group.tsd-index-group { + margin-bottom: 0; +} +.tsd-index-panel .tsd-index-list { + list-style: none; + line-height: 1.333em; + margin: 0; + padding: 0.25rem 0 0 0; + overflow: hidden; + display: grid; + grid-template-columns: repeat(3, 1fr); + column-gap: 1rem; + grid-template-rows: auto; +} +@media (max-width: 1024px) { + .tsd-index-panel .tsd-index-list { + grid-template-columns: repeat(2, 1fr); + } +} +@media (max-width: 768px) { + .tsd-index-panel .tsd-index-list { + grid-template-columns: repeat(1, 1fr); + } +} +.tsd-index-panel .tsd-index-list li { + -webkit-page-break-inside: avoid; + -moz-page-break-inside: avoid; + -ms-page-break-inside: avoid; + -o-page-break-inside: avoid; + page-break-inside: avoid; +} + +.tsd-flag { + display: inline-block; + padding: 0.25em 0.4em; + border-radius: 4px; + color: var(--color-comment-tag-text); + background-color: var(--color-comment-tag); + text-indent: 0; + font-size: 75%; + line-height: 1; + font-weight: normal; +} + +.tsd-anchor { + position: relative; + top: -100px; +} + +.tsd-member { + position: relative; +} +.tsd-member .tsd-anchor + h3 { + display: flex; + align-items: center; + margin-top: 0; + margin-bottom: 0; + border-bottom: none; +} + +.tsd-navigation.settings { + margin: 1rem 0; +} +.tsd-navigation > a, +.tsd-navigation .tsd-accordion-summary { + width: calc(100% - 0.5rem); +} +.tsd-navigation a, +.tsd-navigation summary > span, +.tsd-page-navigation a { + display: inline-flex; + align-items: center; + padding: 0.25rem; + color: var(--color-text); + text-decoration: none; + box-sizing: border-box; +} +.tsd-navigation a.current, +.tsd-page-navigation a.current { + background: var(--color-active-menu-item); +} +.tsd-navigation a:hover, +.tsd-page-navigation a:hover { + text-decoration: underline; +} +.tsd-navigation ul, +.tsd-page-navigation ul { + margin-top: 0; + margin-bottom: 0; + padding: 0; + list-style: none; +} +.tsd-navigation li, +.tsd-page-navigation li { + padding: 0; + max-width: 100%; +} +.tsd-nested-navigation { + margin-left: 3rem; +} +.tsd-nested-navigation > li > details { + margin-left: -1.5rem; +} +.tsd-small-nested-navigation { + margin-left: 1.5rem; +} +.tsd-small-nested-navigation > li > details { + margin-left: -1.5rem; +} + +.tsd-nested-navigation > li > a, +.tsd-nested-navigation > li > span { + width: calc(100% - 1.75rem - 0.5rem); +} + +.tsd-page-navigation ul { + padding-left: 1.75rem; +} + +#tsd-sidebar-links a { + margin-top: 0; + margin-bottom: 0.5rem; + line-height: 1.25rem; +} +#tsd-sidebar-links a:last-of-type { + margin-bottom: 0; +} + +a.tsd-index-link { + padding: 0.25rem 0 !important; + font-size: 1rem; + line-height: 1.25rem; + display: inline-flex; + align-items: center; + color: var(--color-text); +} +.tsd-accordion-summary { + list-style-type: none; /* hide marker on non-safari */ + outline: none; /* broken on safari, so just hide it */ +} +.tsd-accordion-summary::-webkit-details-marker { + display: none; /* hide marker on safari */ +} +.tsd-accordion-summary, +.tsd-accordion-summary a { + user-select: none; + -moz-user-select: none; + -webkit-user-select: none; + -ms-user-select: none; + + cursor: pointer; +} +.tsd-accordion-summary a { + width: calc(100% - 1.5rem); +} +.tsd-accordion-summary > * { + margin-top: 0; + margin-bottom: 0; + padding-top: 0; + padding-bottom: 0; +} +.tsd-index-accordion .tsd-accordion-summary > svg { + margin-left: 0.25rem; +} +.tsd-index-content > :not(:first-child) { + margin-top: 0.75rem; +} +.tsd-index-heading { + margin-top: 1.5rem; + margin-bottom: 0.75rem; +} + +.tsd-kind-icon { + margin-right: 0.5rem; + width: 1.25rem; + height: 1.25rem; + min-width: 1.25rem; + min-height: 1.25rem; +} +.tsd-kind-icon path { + transform-origin: center; + transform: scale(1.1); +} +.tsd-signature > .tsd-kind-icon { + margin-right: 0.8rem; +} + +.tsd-panel { + margin-bottom: 2.5rem; +} +.tsd-panel.tsd-member { + margin-bottom: 4rem; +} +.tsd-panel:empty { + display: none; +} +.tsd-panel > h1, +.tsd-panel > h2, +.tsd-panel > h3 { + margin: 1.5rem -1.5rem 0.75rem -1.5rem; + padding: 0 1.5rem 0.75rem 1.5rem; +} +.tsd-panel > h1.tsd-before-signature, +.tsd-panel > h2.tsd-before-signature, +.tsd-panel > h3.tsd-before-signature { + margin-bottom: 0; + border-bottom: none; +} + +.tsd-panel-group { + margin: 4rem 0; +} +.tsd-panel-group.tsd-index-group { + margin: 2rem 0; +} +.tsd-panel-group.tsd-index-group details { + margin: 2rem 0; +} + +#tsd-search { + transition: background-color 0.2s; +} +#tsd-search .title { + position: relative; + z-index: 2; +} +#tsd-search .field { + position: absolute; + left: 0; + top: 0; + right: 2.5rem; + height: 100%; +} +#tsd-search .field input { + box-sizing: border-box; + position: relative; + top: -50px; + z-index: 1; + width: 100%; + padding: 0 10px; + opacity: 0; + outline: 0; + border: 0; + background: transparent; + color: var(--color-text); +} +#tsd-search .field label { + position: absolute; + overflow: hidden; + right: -40px; +} +#tsd-search .field input, +#tsd-search .title, +#tsd-toolbar-links a { + transition: opacity 0.2s; +} +#tsd-search .results { + position: absolute; + visibility: hidden; + top: 40px; + width: 100%; + margin: 0; + padding: 0; + list-style: none; + box-shadow: 0 0 4px rgba(0, 0, 0, 0.25); +} +#tsd-search .results li { + background-color: var(--color-background); + line-height: initial; + padding: 4px; +} +#tsd-search .results li:nth-child(even) { + background-color: var(--color-background-secondary); +} +#tsd-search .results li.state { + display: none; +} +#tsd-search .results li.current:not(.no-results), +#tsd-search .results li:hover:not(.no-results) { + background-color: var(--color-accent); +} +#tsd-search .results a { + display: flex; + align-items: center; + padding: 0.25rem; + box-sizing: border-box; +} +#tsd-search .results a:before { + top: 10px; +} +#tsd-search .results span.parent { + color: var(--color-text-aside); + font-weight: normal; +} +#tsd-search.has-focus { + background-color: var(--color-accent); +} +#tsd-search.has-focus .field input { + top: 0; + opacity: 1; +} +#tsd-search.has-focus .title, +#tsd-search.has-focus #tsd-toolbar-links a { + z-index: 0; + opacity: 0; +} +#tsd-search.has-focus .results { + visibility: visible; +} +#tsd-search.loading .results li.state.loading { + display: block; +} +#tsd-search.failure .results li.state.failure { + display: block; +} + +#tsd-toolbar-links { + position: absolute; + top: 0; + right: 2rem; + height: 100%; + display: flex; + align-items: center; + justify-content: flex-end; +} +#tsd-toolbar-links a { + margin-left: 1.5rem; +} +#tsd-toolbar-links a:hover { + text-decoration: underline; +} + +.tsd-signature { + margin: 0 0 1rem 0; + padding: 1rem 0.5rem; + border: 1px solid var(--color-accent); + font-family: Menlo, Monaco, Consolas, "Courier New", monospace; + font-size: 14px; + overflow-x: auto; +} + +.tsd-signature-keyword { + color: var(--color-ts-keyword); + font-weight: normal; +} + +.tsd-signature-symbol { + color: var(--color-text-aside); + font-weight: normal; +} + +.tsd-signature-type { + font-style: italic; + font-weight: normal; +} + +.tsd-signatures { + padding: 0; + margin: 0 0 1em 0; + list-style-type: none; +} +.tsd-signatures .tsd-signature { + margin: 0; + border-color: var(--color-accent); + border-width: 1px 0; + transition: background-color 0.1s; +} +.tsd-description .tsd-signatures .tsd-signature { + border-width: 1px; +} + +ul.tsd-parameter-list, +ul.tsd-type-parameter-list { + list-style: square; + margin: 0; + padding-left: 20px; +} +ul.tsd-parameter-list > li.tsd-parameter-signature, +ul.tsd-type-parameter-list > li.tsd-parameter-signature { + list-style: none; + margin-left: -20px; +} +ul.tsd-parameter-list h5, +ul.tsd-type-parameter-list h5 { + font-size: 16px; + margin: 1em 0 0.5em 0; +} +.tsd-sources { + margin-top: 1rem; + font-size: 0.875em; +} +.tsd-sources a { + color: var(--color-text-aside); + text-decoration: underline; +} +.tsd-sources ul { + list-style: none; + padding: 0; +} + +.tsd-page-toolbar { + position: sticky; + z-index: 1; + top: 0; + left: 0; + width: 100%; + color: var(--color-text); + background: var(--color-background-secondary); + border-bottom: 1px var(--color-accent) solid; + transition: transform 0.3s ease-in-out; +} +.tsd-page-toolbar a { + color: var(--color-text); + text-decoration: none; +} +.tsd-page-toolbar a.title { + font-weight: bold; +} +.tsd-page-toolbar a.title:hover { + text-decoration: underline; +} +.tsd-page-toolbar .tsd-toolbar-contents { + display: flex; + justify-content: space-between; + height: 2.5rem; + margin: 0 auto; +} +.tsd-page-toolbar .table-cell { + position: relative; + white-space: nowrap; + line-height: 40px; +} +.tsd-page-toolbar .table-cell:first-child { + width: 100%; +} +.tsd-page-toolbar .tsd-toolbar-icon { + box-sizing: border-box; + line-height: 0; + padding: 12px 0; +} + +.tsd-widget { + display: inline-block; + overflow: hidden; + opacity: 0.8; + height: 40px; + transition: + opacity 0.1s, + background-color 0.2s; + vertical-align: bottom; + cursor: pointer; +} +.tsd-widget:hover { + opacity: 0.9; +} +.tsd-widget.active { + opacity: 1; + background-color: var(--color-accent); +} +.tsd-widget.no-caption { + width: 40px; +} +.tsd-widget.no-caption:before { + margin: 0; +} + +.tsd-widget.options, +.tsd-widget.menu { + display: none; +} +input[type="checkbox"] + .tsd-widget:before { + background-position: -120px 0; +} +input[type="checkbox"]:checked + .tsd-widget:before { + background-position: -160px 0; +} + +img { + max-width: 100%; +} + +.tsd-anchor-icon { + display: inline-flex; + align-items: center; + margin-left: 0.5rem; + vertical-align: middle; + color: var(--color-text); +} + +.tsd-anchor-icon svg { + width: 1em; + height: 1em; + visibility: hidden; +} + +.tsd-anchor-link:hover > .tsd-anchor-icon svg { + visibility: visible; +} + +.deprecated { + text-decoration: line-through !important; +} + +.warning { + padding: 1rem; + color: var(--color-warning-text); + background: var(--color-background-warning); +} + +.tsd-kind-project { + color: var(--color-ts-project); +} +.tsd-kind-module { + color: var(--color-ts-module); +} +.tsd-kind-namespace { + color: var(--color-ts-namespace); +} +.tsd-kind-enum { + color: var(--color-ts-enum); +} +.tsd-kind-enum-member { + color: var(--color-ts-enum-member); +} +.tsd-kind-variable { + color: var(--color-ts-variable); +} +.tsd-kind-function { + color: var(--color-ts-function); +} +.tsd-kind-class { + color: var(--color-ts-class); +} +.tsd-kind-interface { + color: var(--color-ts-interface); +} +.tsd-kind-constructor { + color: var(--color-ts-constructor); +} +.tsd-kind-property { + color: var(--color-ts-property); +} +.tsd-kind-method { + color: var(--color-ts-method); +} +.tsd-kind-call-signature { + color: var(--color-ts-call-signature); +} +.tsd-kind-index-signature { + color: var(--color-ts-index-signature); +} +.tsd-kind-constructor-signature { + color: var(--color-ts-constructor-signature); +} +.tsd-kind-parameter { + color: var(--color-ts-parameter); +} +.tsd-kind-type-literal { + color: var(--color-ts-type-literal); +} +.tsd-kind-type-parameter { + color: var(--color-ts-type-parameter); +} +.tsd-kind-accessor { + color: var(--color-ts-accessor); +} +.tsd-kind-get-signature { + color: var(--color-ts-get-signature); +} +.tsd-kind-set-signature { + color: var(--color-ts-set-signature); +} +.tsd-kind-type-alias { + color: var(--color-ts-type-alias); +} + +/* if we have a kind icon, don't color the text by kind */ +.tsd-kind-icon ~ span { + color: var(--color-text); +} + +* { + scrollbar-width: thin; + scrollbar-color: var(--color-accent) var(--color-icon-background); +} + +*::-webkit-scrollbar { + width: 0.75rem; +} + +*::-webkit-scrollbar-track { + background: var(--color-icon-background); +} + +*::-webkit-scrollbar-thumb { + background-color: var(--color-accent); + border-radius: 999rem; + border: 0.25rem solid var(--color-icon-background); +} + +/* mobile */ +@media (max-width: 769px) { + .tsd-widget.options, + .tsd-widget.menu { + display: inline-block; + } + + .container-main { + display: flex; + } + html .col-content { + float: none; + max-width: 100%; + width: 100%; + } + html .col-sidebar { + position: fixed !important; + overflow-y: auto; + -webkit-overflow-scrolling: touch; + z-index: 1024; + top: 0 !important; + bottom: 0 !important; + left: auto !important; + right: 0 !important; + padding: 1.5rem 1.5rem 0 0; + width: 75vw; + visibility: hidden; + background-color: var(--color-background); + transform: translate(100%, 0); + } + html .col-sidebar > *:last-child { + padding-bottom: 20px; + } + html .overlay { + content: ""; + display: block; + position: fixed; + z-index: 1023; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: rgba(0, 0, 0, 0.75); + visibility: hidden; + } + + .to-has-menu .overlay { + animation: fade-in 0.4s; + } + + .to-has-menu .col-sidebar { + animation: pop-in-from-right 0.4s; + } + + .from-has-menu .overlay { + animation: fade-out 0.4s; + } + + .from-has-menu .col-sidebar { + animation: pop-out-to-right 0.4s; + } + + .has-menu body { + overflow: hidden; + } + .has-menu .overlay { + visibility: visible; + } + .has-menu .col-sidebar { + visibility: visible; + transform: translate(0, 0); + display: flex; + flex-direction: column; + gap: 1.5rem; + max-height: 100vh; + padding: 1rem 2rem; + } + .has-menu .tsd-navigation { + max-height: 100%; + } +} + +/* one sidebar */ +@media (min-width: 770px) { + .container-main { + display: grid; + grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); + grid-template-areas: "sidebar content"; + margin: 2rem auto; + } + + .col-sidebar { + grid-area: sidebar; + } + .col-content { + grid-area: content; + padding: 0 1rem; + } +} +@media (min-width: 770px) and (max-width: 1399px) { + .col-sidebar { + max-height: calc(100vh - 2rem - 42px); + overflow: auto; + position: sticky; + top: 42px; + padding-top: 1rem; + } + .site-menu { + margin-top: 1rem; + } +} + +/* two sidebars */ +@media (min-width: 1200px) { + .container-main { + grid-template-columns: minmax(0, 1fr) minmax(0, 2.5fr) minmax(0, 20rem); + grid-template-areas: "sidebar content toc"; + } + + .col-sidebar { + display: contents; + } + + .page-menu { + grid-area: toc; + padding-left: 1rem; + } + .site-menu { + grid-area: sidebar; + } + + .site-menu { + margin-top: 1rem 0; + } + + .page-menu, + .site-menu { + max-height: calc(100vh - 2rem - 42px); + overflow: auto; + position: sticky; + top: 42px; + } +} diff --git a/docs/functions/client_color_switch_color_switch.ColorSwitch.html b/docs/functions/client_color_switch_color_switch.ColorSwitch.html new file mode 100644 index 00000000..34eb136a --- /dev/null +++ b/docs/functions/client_color_switch_color_switch.ColorSwitch.html @@ -0,0 +1,7 @@ +ColorSwitch | Code Documentation

Function ColorSwitch

Settings

Member Visibility

Theme

Generated using TypeDoc

\ No newline at end of file diff --git a/docs/functions/client_force_color_scheme_force_color_scheme.ForceColorScheme.html b/docs/functions/client_force_color_scheme_force_color_scheme.ForceColorScheme.html new file mode 100644 index 00000000..063c9eb4 --- /dev/null +++ b/docs/functions/client_force_color_scheme_force_color_scheme.ForceColorScheme.html @@ -0,0 +1 @@ +ForceColorScheme | Code Documentation

Function ForceColorScheme

Settings

Member Visibility

Theme

Generated using TypeDoc

\ No newline at end of file diff --git a/docs/functions/client_force_theme_force_theme.ForceTheme.html b/docs/functions/client_force_theme_force_theme.ForceTheme.html new file mode 100644 index 00000000..23fdf4fa --- /dev/null +++ b/docs/functions/client_force_theme_force_theme.ForceTheme.html @@ -0,0 +1 @@ +ForceTheme | Code Documentation

Function ForceTheme

Settings

Member Visibility

Theme

Generated using TypeDoc

\ No newline at end of file diff --git a/docs/functions/client_theme_switcher_theme_switcher.ThemeSwitcher.html b/docs/functions/client_theme_switcher_theme_switcher.ThemeSwitcher.html new file mode 100644 index 00000000..68a93653 --- /dev/null +++ b/docs/functions/client_theme_switcher_theme_switcher.ThemeSwitcher.html @@ -0,0 +1 @@ +ThemeSwitcher | Code Documentation

Function ThemeSwitcher

Settings

Member Visibility

Theme

Generated using TypeDoc

\ No newline at end of file diff --git a/docs/functions/client_theme_switcher_theme_switcher.useThemeSwitcher.html b/docs/functions/client_theme_switcher_theme_switcher.useThemeSwitcher.html new file mode 100644 index 00000000..0d9ac2a0 --- /dev/null +++ b/docs/functions/client_theme_switcher_theme_switcher.useThemeSwitcher.html @@ -0,0 +1 @@ +useThemeSwitcher | Code Documentation

Function useThemeSwitcher

Settings

Member Visibility

Theme

Generated using TypeDoc

\ No newline at end of file diff --git a/docs/functions/server_nextjs_server_side_wrapper_server_side_wrapper.NextJsSSGThemeSwitcher.html b/docs/functions/server_nextjs_server_side_wrapper_server_side_wrapper.NextJsSSGThemeSwitcher.html new file mode 100644 index 00000000..781e9ff5 --- /dev/null +++ b/docs/functions/server_nextjs_server_side_wrapper_server_side_wrapper.NextJsSSGThemeSwitcher.html @@ -0,0 +1 @@ +NextJsSSGThemeSwitcher | Code Documentation

Function NextJsSSGThemeSwitcher

Settings

Member Visibility

Theme

Generated using TypeDoc

\ No newline at end of file diff --git a/docs/functions/server_nextjs_server_side_wrapper_server_side_wrapper.ServerSideWrapper.html b/docs/functions/server_nextjs_server_side_wrapper_server_side_wrapper.ServerSideWrapper.html new file mode 100644 index 00000000..fdf1f49e --- /dev/null +++ b/docs/functions/server_nextjs_server_side_wrapper_server_side_wrapper.ServerSideWrapper.html @@ -0,0 +1,2 @@ +ServerSideWrapper | Code Documentation

Function ServerSideWrapper

Settings

Member Visibility

Theme

Generated using TypeDoc

\ No newline at end of file diff --git a/docs/functions/store.useTheme-1.html b/docs/functions/store.useTheme-1.html new file mode 100644 index 00000000..df49fb92 --- /dev/null +++ b/docs/functions/store.useTheme-1.html @@ -0,0 +1,2 @@ +useTheme | Code Documentation

Function useTheme

  • useTheme(): ThemeStoreType & ThemeStoreActionsType

  • Returns ThemeStoreType & ThemeStoreActionsType

  • useTheme<U>(selector): U

  • Type Parameters

    • U

    Parameters

    • selector: ((state) => U)
        • (state): U

        • Parameters

          Returns U

    Returns U

  • useTheme<U>(selector, equalityFn): U

  • Type Parameters

    • U

    Parameters

    • selector: ((state) => U)
        • (state): U

        • Parameters

          Returns U

    • equalityFn: ((a, b) => boolean)
        • (a, b): boolean

        • Parameters

          • a: U
          • b: U

          Returns boolean

    Returns U

    Deprecated

    Use createWithEqualityFn from 'zustand/traditional'

    +

Settings

Member Visibility

Theme

Generated using TypeDoc

\ No newline at end of file diff --git a/docs/functions/store.useTheme.destroy.html b/docs/functions/store.useTheme.destroy.html new file mode 100644 index 00000000..81dc56ce --- /dev/null +++ b/docs/functions/store.useTheme.destroy.html @@ -0,0 +1,2 @@ +destroy | Code Documentation

Function destroy

  • destroy(): void

  • Returns void

    Deprecated

    Use unsubscribe returned by subscribe

    +

Settings

Member Visibility

Theme

Generated using TypeDoc

\ No newline at end of file diff --git a/docs/functions/store.useTheme.getState.html b/docs/functions/store.useTheme.getState.html new file mode 100644 index 00000000..82a93930 --- /dev/null +++ b/docs/functions/store.useTheme.getState.html @@ -0,0 +1 @@ +getState | Code Documentation

Function getState

  • getState(): ThemeStoreType & ThemeStoreActionsType

  • Returns ThemeStoreType & ThemeStoreActionsType

Settings

Member Visibility

Theme

Generated using TypeDoc

\ No newline at end of file diff --git a/docs/functions/store.useTheme.setState.html b/docs/functions/store.useTheme.setState.html new file mode 100644 index 00000000..53bf094b --- /dev/null +++ b/docs/functions/store.useTheme.setState.html @@ -0,0 +1 @@ +setState | Code Documentation

Function setState

  • setState(partial, replace?): void

  • Parameters

    Returns void

Settings

Member Visibility

Theme

Generated using TypeDoc

\ No newline at end of file diff --git a/docs/functions/store.useTheme.subscribe.html b/docs/functions/store.useTheme.subscribe.html new file mode 100644 index 00000000..c9bd546f --- /dev/null +++ b/docs/functions/store.useTheme.subscribe.html @@ -0,0 +1 @@ +subscribe | Code Documentation

Function subscribe

  • subscribe(listener): (() => void)

  • Parameters

    • listener: ((state, prevState) => void)
        • (state, prevState): void

        • Parameters

          Returns void

    Returns (() => void)

      • (): void

      • Returns void

Settings

Member Visibility

Theme

Generated using TypeDoc

\ No newline at end of file diff --git a/docs/functions/utils.resolveThemeFromColorScheme.html b/docs/functions/utils.resolveThemeFromColorScheme.html new file mode 100644 index 00000000..82a63b87 --- /dev/null +++ b/docs/functions/utils.resolveThemeFromColorScheme.html @@ -0,0 +1 @@ +resolveThemeFromColorScheme | Code Documentation

Function resolveThemeFromColorScheme

Settings

Member Visibility

Theme

Generated using TypeDoc

\ No newline at end of file diff --git a/docs/index.html b/docs/index.html new file mode 100644 index 00000000..95a39243 --- /dev/null +++ b/docs/index.html @@ -0,0 +1,73 @@ +Code Documentation

Code Documentation

Nextjs-Themes Version codecov Downloads npm bundle size Publish to npm and GitHub Contact me on Codementor

+

This is a sister package of react18-themes. Initially we targeted only Next.js and thus this package was named nextjs-themes. However, we have expanded support for Vite and Remix as well. And thus published a package with more generic name, react18-themes.

+
+
+

We recommend using react18-themes for latest updates. Though this package is also maintained with specific focus on Next.js, all the functionality of this package along with extended support for other build tools is available in react18-themes

+
+

🤟 👉 Unleash the Power of React Server Components

+

This project is inspired by next-themes. Next-themes is an awesome package, however, it requires wrapping everything in a provider. The provider has to be a client component as it uses hooks. And thus, it takes away all the benefits of Server Components.

+

nextjs-themes removes this limitation and enables you to unleash the full power of React 18 Server Components. In addition, more features are coming up soon... Stay tuned!

+
    +
  • ✅ Fully Treeshakable (import from nextjs-themes/client/component)
    • +
  • ✅ Designed for excellence
    • +
  • ✅ Full TypeScript Support
    • +
  • ✅ Unleash the full power of React18 Server components
    • +
  • ✅ Works with all build systems/tools/frameworks for React18
    • +
  • ✅ Perfect dark mode in 2 lines of code
    • +
  • ✅ System setting with prefers-color-scheme
    • +
  • ✅ Themed browser UI with color-scheme
    • +
  • ✅ Support for Next.js 13 & Next.js 14 appDir
    • +
  • ✅ Sync theme across tabs and windows
    • +
  • ✅ Disable flashing when changing themes
    • +
  • ✅ Force pages to specific themes
    • +
  • ✅ Class or data attribute selector
    • +
  • ✅ Manipulate theme via useTheme hook
    • +
  • ✅ Doccumented with Typedoc (Docs)
    • +
+

Check out the live example.

+

Install

$ pnpm add nextjs-themes
# or
$ npm install nextjs-themes
# or
$ yarn add nextjs-themes
+
+

Want Lite Version? npm bundle size

$ pnpm add nextjs-themes-lite
# or
$ npm install nextjs-themes-lite
# or
$ yarn add nextjs-themes-lite
+
+
+

You need Zustand as a peer-dependency

+
+

Use

With pages/

The best way is to add a Custom App to use by modifying _app as follows:

+

Adding dark mode support takes 2 lines of code:

+
import { ThemeSwitcher } from "next-themes";

function MyApp({ Component, pageProps }) {
  return (
    <>
      <ThemeSwitcher forcedTheme={Component.theme} />
      <Component {...pageProps} />
    </>
  );
}

export default MyApp;
+
+

⚡🎉Boom! Just a couple of lines and your dark mode is ready!

+

Check out examples for advanced usage.

+

With app/

Update your app/layout.jsx to add ThemeSwitcher and SSCWrapper from nextjs-themes. SSCWrapper is required to avoid flash of un-themed content on reload.

+
// app/layout.jsx
import { ThemeSwitcher } from "next-themes";
import { SSCWrapper } from "next-themes/server/nextjs";

export default function Layout({ children }) {
  return (
    <SSCWrapper tag="html" lang="en">
      <head />
      <body>
        <ThemeSwitcher />
        {children}
      </body>
    </SSCWrapper>
  );
}
+
+

Woohoo! You just added dark mode and you can also use Server Component! Isn't that awesome!

+

HTML & CSS

That's it, your Next.js app fully supports dark mode, including System preference with prefers-color-scheme. The theme is also immediately synced between tabs. By default, next-themes modifies the data-theme attribute on the html element, which you can easily use to style your app:

+
:root {
  /* Your default theme */
  --background: white;
  --foreground: black;
}

[data-theme="dark"] {
  --background: black;
  --foreground: white;
}
+
+

useTheme

In case your components need to know the current theme and be able to change it. The useTheme hook provides theme information:

+
import { useTheme } from "nextjs-themes";

const ThemeChanger = () => {
  /* you can also improve performance by using selectors
   * const [theme, setTheme] = useTheme(state => [state.theme, state.setTheme]);
   */
  const { theme, setTheme } = useTheme();

  return (
    <div>
      The current theme is: {theme}
      <button onClick={() => setTheme("light")}>Light Mode</button>
      <button onClick={() => setTheme("dark")}>Dark Mode</button>
    </div>
  );
};
+
+

Force per page theme and color-scheme

Next.js app router

import { ForceTheme } from "nextjs-themes";

function MyPage() {
  return (
    <>
      <ForceTheme theme={"my-theme"} />
      ...
    </>
  );
}

export default MyPage;
+
+

Next.js pages router

For pages router, you have 2 options. One is the same as the app router and the other option which is compatible with next-themes is to add theme to your page component as follows.

+
function MyPage() {
  return <>...</>;
}

MyPage.theme = "my-theme";

export default MyPage;
+
+

In a similar way, you can also force color scheme.

+

Forcing color scheme will apply your defaultDark or defaultLight theme, configurable via hooks.

+

Migrating from v0 to v1

    +
  • defaultDarkTheme is renamed to darkTheme
    • +
  • setDefaultDarkTheme is renamed to setDarkTheme
    • +
  • defaultLightTheme is renamed to lightTheme
    • +
  • setDefaultLightTheme is renamed to setLightTheme
    • +
+
+

Full docs coming soon!

+
+

License

Licensed as MIT open source.

+
+

Note: This package uses cookies to sync theme with server components

+
+
+ +

with 💖 by Mayank Kumar Chaudhari

Settings

Member Visibility

Theme

On This Page

Generated using TypeDoc

\ No newline at end of file diff --git a/docs/interfaces/client_color_switch_color_switch.ColorSwitchProps.html b/docs/interfaces/client_color_switch_color_switch.ColorSwitchProps.html new file mode 100644 index 00000000..ba805dc7 --- /dev/null +++ b/docs/interfaces/client_color_switch_color_switch.ColorSwitchProps.html @@ -0,0 +1,3 @@ +ColorSwitchProps | Code Documentation

Interface ColorSwitchProps

interface ColorSwitchProps {
    size?: number;
}

Properties

size? +

Properties

Optional size

size?: number

Diameter of the color color switch

+

Settings

Member Visibility

Theme

On This Page

Generated using TypeDoc

\ No newline at end of file diff --git a/docs/interfaces/client_theme_switcher_theme_switcher.ThemeSwitcherProps.html b/docs/interfaces/client_theme_switcher_theme_switcher.ThemeSwitcherProps.html new file mode 100644 index 00000000..f8b44054 --- /dev/null +++ b/docs/interfaces/client_theme_switcher_theme_switcher.ThemeSwitcherProps.html @@ -0,0 +1,4 @@ +ThemeSwitcherProps | Code Documentation

Interface ThemeSwitcherProps

interface ThemeSwitcherProps {
    forcedColorScheme?: ColorSchemeType;
    forcedTheme?: string;
    targetSelector?: string;
}

Properties

forcedColorScheme? +forcedTheme? +targetSelector? +

Properties

Optional forcedColorScheme

forcedColorScheme?: ColorSchemeType

Optional forcedTheme

forcedTheme?: string

Optional targetSelector

targetSelector?: string

Settings

Member Visibility

Theme

On This Page

Generated using TypeDoc

\ No newline at end of file diff --git a/docs/interfaces/server_nextjs_server_side_wrapper_server_side_wrapper.NextJsSSRThemeSwitcherProps.html b/docs/interfaces/server_nextjs_server_side_wrapper_server_side_wrapper.NextJsSSRThemeSwitcherProps.html new file mode 100644 index 00000000..75903e2a --- /dev/null +++ b/docs/interfaces/server_nextjs_server_side_wrapper_server_side_wrapper.NextJsSSRThemeSwitcherProps.html @@ -0,0 +1,519 @@ +NextJsSSRThemeSwitcherProps | Code Documentation

Interface NextJsSSRThemeSwitcherProps

interface NextJsSSRThemeSwitcherProps {
    about?: string;
    accept?: string;
    acceptCharset?: string;
    accessKey?: string;
    action?: string | ((formData) => void);
    allowFullScreen?: boolean;
    allowTransparency?: boolean;
    alt?: string;
    aria-activedescendant?: string;
    aria-atomic?: Booleanish;
    aria-autocomplete?: "list" | "none" | "inline" | "both";
    aria-braillelabel?: string;
    aria-brailleroledescription?: string;
    aria-busy?: Booleanish;
    aria-checked?: boolean | "true" | "false" | "mixed";
    aria-colcount?: number;
    aria-colindex?: number;
    aria-colindextext?: string;
    aria-colspan?: number;
    aria-controls?: string;
    aria-current?: boolean | "time" | "page" | "step" | "true" | "false" | "date" | "location";
    aria-describedby?: string;
    aria-description?: string;
    aria-details?: string;
    aria-disabled?: Booleanish;
    aria-dropeffect?: "link" | "none" | "copy" | "execute" | "move" | "popup";
    aria-errormessage?: string;
    aria-expanded?: Booleanish;
    aria-flowto?: string;
    aria-grabbed?: Booleanish;
    aria-haspopup?: boolean | "dialog" | "menu" | "grid" | "listbox" | "tree" | "true" | "false";
    aria-hidden?: Booleanish;
    aria-invalid?: boolean | "true" | "false" | "grammar" | "spelling";
    aria-keyshortcuts?: string;
    aria-label?: string;
    aria-labelledby?: string;
    aria-level?: number;
    aria-live?: "off" | "assertive" | "polite";
    aria-modal?: Booleanish;
    aria-multiline?: Booleanish;
    aria-multiselectable?: Booleanish;
    aria-orientation?: "horizontal" | "vertical";
    aria-owns?: string;
    aria-placeholder?: string;
    aria-posinset?: number;
    aria-pressed?: boolean | "true" | "false" | "mixed";
    aria-readonly?: Booleanish;
    aria-relevant?: "text" | "all" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals";
    aria-required?: Booleanish;
    aria-roledescription?: string;
    aria-rowcount?: number;
    aria-rowindex?: number;
    aria-rowindextext?: string;
    aria-rowspan?: number;
    aria-selected?: Booleanish;
    aria-setsize?: number;
    aria-sort?: "none" | "ascending" | "descending" | "other";
    aria-valuemax?: number;
    aria-valuemin?: number;
    aria-valuenow?: number;
    aria-valuetext?: string;
    as?: string;
    async?: boolean;
    autoCapitalize?: string;
    autoComplete?: string;
    autoCorrect?: string;
    autoFocus?: boolean;
    autoPlay?: boolean;
    autoSave?: string;
    capture?: boolean | "user" | "environment";
    cellPadding?: string | number;
    cellSpacing?: string | number;
    challenge?: string;
    charSet?: string;
    checked?: boolean;
    children?: ReactNode;
    cite?: string;
    classID?: string;
    className?: string;
    colSpan?: number;
    color?: string;
    cols?: number;
    content?: string;
    contentEditable?: Booleanish | "inherit" | "plaintext-only";
    contextMenu?: string;
    controls?: boolean;
    coords?: string;
    crossOrigin?: CrossOrigin;
    dangerouslySetInnerHTML?: {
        __html: string | TrustedHTML;
    };
    data?: string;
    datatype?: string;
    dateTime?: string;
    default?: boolean;
    defaultChecked?: boolean;
    defaultValue?: string | number | readonly string[];
    defer?: boolean;
    dir?: string;
    disabled?: boolean;
    download?: any;
    draggable?: Booleanish;
    encType?: string;
    forcedPages?: ForcedPage[];
    form?: string;
    formAction?: string | ((formData) => void);
    formEncType?: string;
    formMethod?: string;
    formNoValidate?: boolean;
    formTarget?: string;
    frameBorder?: string | number;
    headers?: string;
    height?: string | number;
    hidden?: boolean;
    high?: number;
    href?: string;
    hrefLang?: string;
    htmlFor?: string;
    httpEquiv?: string;
    id?: string;
    inlist?: any;
    inputMode?: "search" | "text" | "none" | "tel" | "url" | "email" | "numeric" | "decimal";
    integrity?: string;
    is?: string;
    itemID?: string;
    itemProp?: string;
    itemRef?: string;
    itemScope?: boolean;
    itemType?: string;
    key?: null | Key;
    keyParams?: string;
    keyType?: string;
    kind?: string;
    label?: string;
    lang?: string;
    list?: string;
    loop?: boolean;
    low?: number;
    manifest?: string;
    marginHeight?: number;
    marginWidth?: number;
    max?: string | number;
    maxLength?: number;
    media?: string;
    mediaGroup?: string;
    method?: string;
    min?: string | number;
    minLength?: number;
    multiple?: boolean;
    muted?: boolean;
    name?: string;
    noValidate?: boolean;
    nonce?: string;
    onAbort?: ReactEventHandler<HTMLElement>;
    onAbortCapture?: ReactEventHandler<HTMLElement>;
    onAnimationEnd?: AnimationEventHandler<HTMLElement>;
    onAnimationEndCapture?: AnimationEventHandler<HTMLElement>;
    onAnimationIteration?: AnimationEventHandler<HTMLElement>;
    onAnimationIterationCapture?: AnimationEventHandler<HTMLElement>;
    onAnimationStart?: AnimationEventHandler<HTMLElement>;
    onAnimationStartCapture?: AnimationEventHandler<HTMLElement>;
    onAuxClick?: MouseEventHandler<HTMLElement>;
    onAuxClickCapture?: MouseEventHandler<HTMLElement>;
    onBeforeInput?: FormEventHandler<HTMLElement>;
    onBeforeInputCapture?: FormEventHandler<HTMLElement>;
    onBlur?: FocusEventHandler<HTMLElement>;
    onBlurCapture?: FocusEventHandler<HTMLElement>;
    onCanPlay?: ReactEventHandler<HTMLElement>;
    onCanPlayCapture?: ReactEventHandler<HTMLElement>;
    onCanPlayThrough?: ReactEventHandler<HTMLElement>;
    onCanPlayThroughCapture?: ReactEventHandler<HTMLElement>;
    onChange?: FormEventHandler<HTMLElement>;
    onChangeCapture?: FormEventHandler<HTMLElement>;
    onClick?: MouseEventHandler<HTMLElement>;
    onClickCapture?: MouseEventHandler<HTMLElement>;
    onCompositionEnd?: CompositionEventHandler<HTMLElement>;
    onCompositionEndCapture?: CompositionEventHandler<HTMLElement>;
    onCompositionStart?: CompositionEventHandler<HTMLElement>;
    onCompositionStartCapture?: CompositionEventHandler<HTMLElement>;
    onCompositionUpdate?: CompositionEventHandler<HTMLElement>;
    onCompositionUpdateCapture?: CompositionEventHandler<HTMLElement>;
    onContextMenu?: MouseEventHandler<HTMLElement>;
    onContextMenuCapture?: MouseEventHandler<HTMLElement>;
    onCopy?: ClipboardEventHandler<HTMLElement>;
    onCopyCapture?: ClipboardEventHandler<HTMLElement>;
    onCut?: ClipboardEventHandler<HTMLElement>;
    onCutCapture?: ClipboardEventHandler<HTMLElement>;
    onDoubleClick?: MouseEventHandler<HTMLElement>;
    onDoubleClickCapture?: MouseEventHandler<HTMLElement>;
    onDrag?: DragEventHandler<HTMLElement>;
    onDragCapture?: DragEventHandler<HTMLElement>;
    onDragEnd?: DragEventHandler<HTMLElement>;
    onDragEndCapture?: DragEventHandler<HTMLElement>;
    onDragEnter?: DragEventHandler<HTMLElement>;
    onDragEnterCapture?: DragEventHandler<HTMLElement>;
    onDragExit?: DragEventHandler<HTMLElement>;
    onDragExitCapture?: DragEventHandler<HTMLElement>;
    onDragLeave?: DragEventHandler<HTMLElement>;
    onDragLeaveCapture?: DragEventHandler<HTMLElement>;
    onDragOver?: DragEventHandler<HTMLElement>;
    onDragOverCapture?: DragEventHandler<HTMLElement>;
    onDragStart?: DragEventHandler<HTMLElement>;
    onDragStartCapture?: DragEventHandler<HTMLElement>;
    onDrop?: DragEventHandler<HTMLElement>;
    onDropCapture?: DragEventHandler<HTMLElement>;
    onDurationChange?: ReactEventHandler<HTMLElement>;
    onDurationChangeCapture?: ReactEventHandler<HTMLElement>;
    onEmptied?: ReactEventHandler<HTMLElement>;
    onEmptiedCapture?: ReactEventHandler<HTMLElement>;
    onEncrypted?: ReactEventHandler<HTMLElement>;
    onEncryptedCapture?: ReactEventHandler<HTMLElement>;
    onEnded?: ReactEventHandler<HTMLElement>;
    onEndedCapture?: ReactEventHandler<HTMLElement>;
    onError?: ReactEventHandler<HTMLElement>;
    onErrorCapture?: ReactEventHandler<HTMLElement>;
    onFocus?: FocusEventHandler<HTMLElement>;
    onFocusCapture?: FocusEventHandler<HTMLElement>;
    onGotPointerCapture?: PointerEventHandler<HTMLElement>;
    onGotPointerCaptureCapture?: PointerEventHandler<HTMLElement>;
    onInput?: FormEventHandler<HTMLElement>;
    onInputCapture?: FormEventHandler<HTMLElement>;
    onInvalid?: FormEventHandler<HTMLElement>;
    onInvalidCapture?: FormEventHandler<HTMLElement>;
    onKeyDown?: KeyboardEventHandler<HTMLElement>;
    onKeyDownCapture?: KeyboardEventHandler<HTMLElement>;
    onKeyPress?: KeyboardEventHandler<HTMLElement>;
    onKeyPressCapture?: KeyboardEventHandler<HTMLElement>;
    onKeyUp?: KeyboardEventHandler<HTMLElement>;
    onKeyUpCapture?: KeyboardEventHandler<HTMLElement>;
    onLoad?: ReactEventHandler<HTMLElement>;
    onLoadCapture?: ReactEventHandler<HTMLElement>;
    onLoadStart?: ReactEventHandler<HTMLElement>;
    onLoadStartCapture?: ReactEventHandler<HTMLElement>;
    onLoadedData?: ReactEventHandler<HTMLElement>;
    onLoadedDataCapture?: ReactEventHandler<HTMLElement>;
    onLoadedMetadata?: ReactEventHandler<HTMLElement>;
    onLoadedMetadataCapture?: ReactEventHandler<HTMLElement>;
    onLostPointerCapture?: PointerEventHandler<HTMLElement>;
    onLostPointerCaptureCapture?: PointerEventHandler<HTMLElement>;
    onMouseDown?: MouseEventHandler<HTMLElement>;
    onMouseDownCapture?: MouseEventHandler<HTMLElement>;
    onMouseEnter?: MouseEventHandler<HTMLElement>;
    onMouseLeave?: MouseEventHandler<HTMLElement>;
    onMouseMove?: MouseEventHandler<HTMLElement>;
    onMouseMoveCapture?: MouseEventHandler<HTMLElement>;
    onMouseOut?: MouseEventHandler<HTMLElement>;
    onMouseOutCapture?: MouseEventHandler<HTMLElement>;
    onMouseOver?: MouseEventHandler<HTMLElement>;
    onMouseOverCapture?: MouseEventHandler<HTMLElement>;
    onMouseUp?: MouseEventHandler<HTMLElement>;
    onMouseUpCapture?: MouseEventHandler<HTMLElement>;
    onPaste?: ClipboardEventHandler<HTMLElement>;
    onPasteCapture?: ClipboardEventHandler<HTMLElement>;
    onPause?: ReactEventHandler<HTMLElement>;
    onPauseCapture?: ReactEventHandler<HTMLElement>;
    onPlay?: ReactEventHandler<HTMLElement>;
    onPlayCapture?: ReactEventHandler<HTMLElement>;
    onPlaying?: ReactEventHandler<HTMLElement>;
    onPlayingCapture?: ReactEventHandler<HTMLElement>;
    onPointerCancel?: PointerEventHandler<HTMLElement>;
    onPointerCancelCapture?: PointerEventHandler<HTMLElement>;
    onPointerDown?: PointerEventHandler<HTMLElement>;
    onPointerDownCapture?: PointerEventHandler<HTMLElement>;
    onPointerEnter?: PointerEventHandler<HTMLElement>;
    onPointerEnterCapture?: PointerEventHandler<HTMLElement>;
    onPointerLeave?: PointerEventHandler<HTMLElement>;
    onPointerLeaveCapture?: PointerEventHandler<HTMLElement>;
    onPointerMove?: PointerEventHandler<HTMLElement>;
    onPointerMoveCapture?: PointerEventHandler<HTMLElement>;
    onPointerOut?: PointerEventHandler<HTMLElement>;
    onPointerOutCapture?: PointerEventHandler<HTMLElement>;
    onPointerOver?: PointerEventHandler<HTMLElement>;
    onPointerOverCapture?: PointerEventHandler<HTMLElement>;
    onPointerUp?: PointerEventHandler<HTMLElement>;
    onPointerUpCapture?: PointerEventHandler<HTMLElement>;
    onProgress?: ReactEventHandler<HTMLElement>;
    onProgressCapture?: ReactEventHandler<HTMLElement>;
    onRateChange?: ReactEventHandler<HTMLElement>;
    onRateChangeCapture?: ReactEventHandler<HTMLElement>;
    onReset?: FormEventHandler<HTMLElement>;
    onResetCapture?: FormEventHandler<HTMLElement>;
    onResize?: ReactEventHandler<HTMLElement>;
    onResizeCapture?: ReactEventHandler<HTMLElement>;
    onScroll?: UIEventHandler<HTMLElement>;
    onScrollCapture?: UIEventHandler<HTMLElement>;
    onSeeked?: ReactEventHandler<HTMLElement>;
    onSeekedCapture?: ReactEventHandler<HTMLElement>;
    onSeeking?: ReactEventHandler<HTMLElement>;
    onSeekingCapture?: ReactEventHandler<HTMLElement>;
    onSelect?: ReactEventHandler<HTMLElement>;
    onSelectCapture?: ReactEventHandler<HTMLElement>;
    onStalled?: ReactEventHandler<HTMLElement>;
    onStalledCapture?: ReactEventHandler<HTMLElement>;
    onSubmit?: FormEventHandler<HTMLElement>;
    onSubmitCapture?: FormEventHandler<HTMLElement>;
    onSuspend?: ReactEventHandler<HTMLElement>;
    onSuspendCapture?: ReactEventHandler<HTMLElement>;
    onTimeUpdate?: ReactEventHandler<HTMLElement>;
    onTimeUpdateCapture?: ReactEventHandler<HTMLElement>;
    onTouchCancel?: TouchEventHandler<HTMLElement>;
    onTouchCancelCapture?: TouchEventHandler<HTMLElement>;
    onTouchEnd?: TouchEventHandler<HTMLElement>;
    onTouchEndCapture?: TouchEventHandler<HTMLElement>;
    onTouchMove?: TouchEventHandler<HTMLElement>;
    onTouchMoveCapture?: TouchEventHandler<HTMLElement>;
    onTouchStart?: TouchEventHandler<HTMLElement>;
    onTouchStartCapture?: TouchEventHandler<HTMLElement>;
    onTransitionEnd?: TransitionEventHandler<HTMLElement>;
    onTransitionEndCapture?: TransitionEventHandler<HTMLElement>;
    onVolumeChange?: ReactEventHandler<HTMLElement>;
    onVolumeChangeCapture?: ReactEventHandler<HTMLElement>;
    onWaiting?: ReactEventHandler<HTMLElement>;
    onWaitingCapture?: ReactEventHandler<HTMLElement>;
    onWheel?: WheelEventHandler<HTMLElement>;
    onWheelCapture?: WheelEventHandler<HTMLElement>;
    open?: boolean;
    optimum?: number;
    pattern?: string;
    placeholder?: string;
    playsInline?: boolean;
    poster?: string;
    prefix?: string;
    preload?: string;
    property?: string;
    radioGroup?: string;
    readOnly?: boolean;
    ref?: LegacyRef<HTMLElement>;
    rel?: string;
    required?: boolean;
    resource?: string;
    results?: number;
    rev?: string;
    reversed?: boolean;
    role?: AriaRole;
    rowSpan?: number;
    rows?: number;
    sandbox?: string;
    scope?: string;
    scoped?: boolean;
    scrolling?: string;
    seamless?: boolean;
    security?: string;
    selected?: boolean;
    shape?: string;
    size?: number;
    sizes?: string;
    slot?: string;
    span?: number;
    spellCheck?: Booleanish;
    src?: string;
    srcDoc?: string;
    srcLang?: string;
    srcSet?: string;
    start?: number;
    step?: string | number;
    style?: CSSProperties;
    summary?: string;
    suppressContentEditableWarning?: boolean;
    suppressHydrationWarning?: boolean;
    tabIndex?: number;
    tag?: keyof IntrinsicElements;
    target?: string;
    title?: string;
    translate?: "yes" | "no";
    type?: string;
    typeof?: string;
    unselectable?: "on" | "off";
    useMap?: string;
    value?: string | number | readonly string[];
    vocab?: string;
    width?: string | number;
    wmode?: string;
    wrap?: string;
}

Hierarchy

Properties

about? +accept? +acceptCharset? +accessKey? +action? +allowFullScreen? +allowTransparency? +alt? +aria-activedescendant? +aria-atomic? +aria-autocomplete? +aria-braillelabel? +aria-brailleroledescription? +aria-busy? +aria-checked? +aria-colcount? +aria-colindex? +aria-colindextext? +aria-colspan? +aria-controls? +aria-current? +aria-describedby? +aria-description? +aria-details? +aria-disabled? +aria-dropeffect? +aria-errormessage? +aria-expanded? +aria-flowto? +aria-grabbed? +aria-haspopup? +aria-hidden? +aria-invalid? +aria-keyshortcuts? +aria-label? +aria-labelledby? +aria-level? +aria-live? +aria-modal? +aria-multiline? +aria-multiselectable? +aria-orientation? +aria-owns? +aria-placeholder? +aria-posinset? +aria-pressed? +aria-readonly? +aria-relevant? +aria-required? +aria-roledescription? +aria-rowcount? +aria-rowindex? +aria-rowindextext? +aria-rowspan? +aria-selected? +aria-setsize? +aria-sort? +aria-valuemax? +aria-valuemin? +aria-valuenow? +aria-valuetext? +as? +async? +autoCapitalize? +autoComplete? +autoCorrect? +autoFocus? +autoPlay? +autoSave? +capture? +cellPadding? +cellSpacing? +challenge? +charSet? +checked? +children? +cite? +classID? +className? +colSpan? +color? +cols? +content? +contentEditable? +contextMenu? +controls? +coords? +crossOrigin? +dangerouslySetInnerHTML? +data? +datatype? +dateTime? +default? +defaultChecked? +defaultValue? +defer? +dir? +disabled? +download? +draggable? +encType? +forcedPages? +form? +formAction? +formEncType? +formMethod? +formNoValidate? +formTarget? +frameBorder? +headers? +height? +hidden? +high? +href? +hrefLang? +htmlFor? +httpEquiv? +id? +inlist? +inputMode? +integrity? +is? +itemID? +itemProp? +itemRef? +itemScope? +itemType? +key? +keyParams? +keyType? +kind? +label? +lang? +list? +loop? +low? +manifest? +marginHeight? +marginWidth? +max? +maxLength? +media? +mediaGroup? +method? +min? +minLength? +multiple? +muted? +name? +noValidate? +nonce? +onAbort? +onAbortCapture? +onAnimationEnd? +onAnimationEndCapture? +onAnimationIteration? +onAnimationIterationCapture? +onAnimationStart? +onAnimationStartCapture? +onAuxClick? +onAuxClickCapture? +onBeforeInput? +onBeforeInputCapture? +onBlur? +onBlurCapture? +onCanPlay? +onCanPlayCapture? +onCanPlayThrough? +onCanPlayThroughCapture? +onChange? +onChangeCapture? +onClick? +onClickCapture? +onCompositionEnd? +onCompositionEndCapture? +onCompositionStart? +onCompositionStartCapture? +onCompositionUpdate? +onCompositionUpdateCapture? +onContextMenu? +onContextMenuCapture? +onCopy? +onCopyCapture? +onCut? +onCutCapture? +onDoubleClick? +onDoubleClickCapture? +onDrag? +onDragCapture? +onDragEnd? +onDragEndCapture? +onDragEnter? +onDragEnterCapture? +onDragExit? +onDragExitCapture? +onDragLeave? +onDragLeaveCapture? +onDragOver? +onDragOverCapture? +onDragStart? +onDragStartCapture? +onDrop? +onDropCapture? +onDurationChange? +onDurationChangeCapture? +onEmptied? +onEmptiedCapture? +onEncrypted? +onEncryptedCapture? +onEnded? +onEndedCapture? +onError? +onErrorCapture? +onFocus? +onFocusCapture? +onGotPointerCapture? +onGotPointerCaptureCapture? +onInput? +onInputCapture? +onInvalid? +onInvalidCapture? +onKeyDown? +onKeyDownCapture? +onKeyPress? +onKeyPressCapture? +onKeyUp? +onKeyUpCapture? +onLoad? +onLoadCapture? +onLoadStart? +onLoadStartCapture? +onLoadedData? +onLoadedDataCapture? +onLoadedMetadata? +onLoadedMetadataCapture? +onLostPointerCapture? +onLostPointerCaptureCapture? +onMouseDown? +onMouseDownCapture? +onMouseEnter? +onMouseLeave? +onMouseMove? +onMouseMoveCapture? +onMouseOut? +onMouseOutCapture? +onMouseOver? +onMouseOverCapture? +onMouseUp? +onMouseUpCapture? +onPaste? +onPasteCapture? +onPause? +onPauseCapture? +onPlay? +onPlayCapture? +onPlaying? +onPlayingCapture? +onPointerCancel? +onPointerCancelCapture? +onPointerDown? +onPointerDownCapture? +onPointerEnter? +onPointerEnterCapture? +onPointerLeave? +onPointerLeaveCapture? +onPointerMove? +onPointerMoveCapture? +onPointerOut? +onPointerOutCapture? +onPointerOver? +onPointerOverCapture? +onPointerUp? +onPointerUpCapture? +onProgress? +onProgressCapture? +onRateChange? +onRateChangeCapture? +onReset? +onResetCapture? +onResize? +onResizeCapture? +onScroll? +onScrollCapture? +onSeeked? +onSeekedCapture? +onSeeking? +onSeekingCapture? +onSelect? +onSelectCapture? +onStalled? +onStalledCapture? +onSubmit? +onSubmitCapture? +onSuspend? +onSuspendCapture? +onTimeUpdate? +onTimeUpdateCapture? +onTouchCancel? +onTouchCancelCapture? +onTouchEnd? +onTouchEndCapture? +onTouchMove? +onTouchMoveCapture? +onTouchStart? +onTouchStartCapture? +onTransitionEnd? +onTransitionEndCapture? +onVolumeChange? +onVolumeChangeCapture? +onWaiting? +onWaitingCapture? +onWheel? +onWheelCapture? +open? +optimum? +pattern? +placeholder? +playsInline? +poster? +prefix? +preload? +property? +radioGroup? +readOnly? +ref? +rel? +required? +resource? +results? +rev? +reversed? +role? +rowSpan? +rows? +sandbox? +scope? +scoped? +scrolling? +seamless? +security? +selected? +shape? +size? +sizes? +slot? +span? +spellCheck? +src? +srcDoc? +srcLang? +srcSet? +start? +step? +style? +summary? +suppressContentEditableWarning? +suppressHydrationWarning? +tabIndex? +tag? +target? +title? +translate? +type? +typeof? +unselectable? +useMap? +value? +vocab? +width? +wmode? +wrap? +

Properties

Optional about

about?: string

RDFa Attributes

+

Optional accept

accept?: string

Standard HTML Attributes

+

Optional acceptCharset

acceptCharset?: string

Optional accessKey

accessKey?: string

Standard HTML Attributes

+

Optional action

action?: string | ((formData) => void)

Type declaration

    • (formData): void

    • Parameters

      • formData: FormData

      Returns void

Optional allowFullScreen

allowFullScreen?: boolean

Optional allowTransparency

allowTransparency?: boolean

Optional alt

alt?: string

Optional aria-activedescendant

aria-activedescendant?: string

Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application.

+

Optional aria-atomic

aria-atomic?: Booleanish

Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute.

+

Optional aria-autocomplete

aria-autocomplete?: "list" | "none" | "inline" | "both"

Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be +presented if they are made.

+

Optional aria-braillelabel

aria-braillelabel?: string

Defines a string value that labels the current element, which is intended to be converted into Braille.

+

See

aria-label.

+

Optional aria-brailleroledescription

aria-brailleroledescription?: string

Defines a human-readable, author-localized abbreviated description for the role of an element, which is intended to be converted into Braille.

+

See

aria-roledescription.

+

Optional aria-busy

aria-busy?: Booleanish

Optional aria-checked

aria-checked?: boolean | "true" | "false" | "mixed"

Indicates the current "checked" state of checkboxes, radio buttons, and other widgets.

+

See

    +
  • aria-pressed
    • +
  • aria-selected.
    • +
+

Optional aria-colcount

aria-colcount?: number

Defines the total number of columns in a table, grid, or treegrid.

+

See

aria-colindex.

+

Optional aria-colindex

aria-colindex?: number

Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid.

+

See

    +
  • aria-colcount
    • +
  • aria-colspan.
    • +
+

Optional aria-colindextext

aria-colindextext?: string

Defines a human readable text alternative of aria-colindex.

+

See

aria-rowindextext.

+

Optional aria-colspan

aria-colspan?: number

Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid.

+

See

    +
  • aria-colindex
    • +
  • aria-rowspan.
    • +
+

Optional aria-controls

aria-controls?: string

Identifies the element (or elements) whose contents or presence are controlled by the current element.

+

See

aria-owns.

+

Optional aria-current

aria-current?: boolean | "time" | "page" | "step" | "true" | "false" | "date" | "location"

Indicates the element that represents the current item within a container or set of related elements.

+

Optional aria-describedby

aria-describedby?: string

Identifies the element (or elements) that describes the object.

+

See

aria-labelledby

+

Optional aria-description

aria-description?: string

Defines a string value that describes or annotates the current element.

+

See

related aria-describedby.

+

Optional aria-details

aria-details?: string

Identifies the element that provides a detailed, extended description for the object.

+

See

aria-describedby.

+

Optional aria-disabled

aria-disabled?: Booleanish

Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.

+

See

    +
  • aria-hidden
    • +
  • aria-readonly.
    • +
+

Optional aria-dropeffect

aria-dropeffect?: "link" | "none" | "copy" | "execute" | "move" | "popup"

Indicates what functions can be performed when a dragged object is released on the drop target.

+

Deprecated

in ARIA 1.1

+

Optional aria-errormessage

aria-errormessage?: string

Identifies the element that provides an error message for the object.

+

See

    +
  • aria-invalid
    • +
  • aria-describedby.
    • +
+

Optional aria-expanded

aria-expanded?: Booleanish

Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed.

+

Optional aria-flowto

aria-flowto?: string

Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion, +allows assistive technology to override the general default of reading in document source order.

+

Optional aria-grabbed

aria-grabbed?: Booleanish

Indicates an element's "grabbed" state in a drag-and-drop operation.

+

Deprecated

in ARIA 1.1

+

Optional aria-haspopup

aria-haspopup?: boolean | "dialog" | "menu" | "grid" | "listbox" | "tree" | "true" | "false"

Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element.

+

Optional aria-hidden

aria-hidden?: Booleanish

Indicates whether the element is exposed to an accessibility API.

+

See

aria-disabled.

+

Optional aria-invalid

aria-invalid?: boolean | "true" | "false" | "grammar" | "spelling"

Indicates the entered value does not conform to the format expected by the application.

+

See

aria-errormessage.

+

Optional aria-keyshortcuts

aria-keyshortcuts?: string

Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element.

+

Optional aria-label

aria-label?: string

Defines a string value that labels the current element.

+

See

aria-labelledby.

+

Optional aria-labelledby

aria-labelledby?: string

Identifies the element (or elements) that labels the current element.

+

See

aria-describedby.

+

Optional aria-level

aria-level?: number

Defines the hierarchical level of an element within a structure.

+

Optional aria-live

aria-live?: "off" | "assertive" | "polite"

Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region.

+

Optional aria-modal

aria-modal?: Booleanish

Indicates whether an element is modal when displayed.

+

Optional aria-multiline

aria-multiline?: Booleanish

Indicates whether a text box accepts multiple lines of input or only a single line.

+

Optional aria-multiselectable

aria-multiselectable?: Booleanish

Indicates that the user may select more than one item from the current selectable descendants.

+

Optional aria-orientation

aria-orientation?: "horizontal" | "vertical"

Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous.

+

Optional aria-owns

aria-owns?: string

Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship +between DOM elements where the DOM hierarchy cannot be used to represent the relationship.

+

See

aria-controls.

+

Optional aria-placeholder

aria-placeholder?: string

Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value. +A hint could be a sample value or a brief description of the expected format.

+

Optional aria-posinset

aria-posinset?: number

Defines an element's number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.

+

See

aria-setsize.

+

Optional aria-pressed

aria-pressed?: boolean | "true" | "false" | "mixed"

Indicates the current "pressed" state of toggle buttons.

+

See

    +
  • aria-checked
    • +
  • aria-selected.
    • +
+

Optional aria-readonly

aria-readonly?: Booleanish

Indicates that the element is not editable, but is otherwise operable.

+

See

aria-disabled.

+

Optional aria-relevant

aria-relevant?: "text" | "all" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals"

Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified.

+

See

aria-atomic.

+

Optional aria-required

aria-required?: Booleanish

Indicates that user input is required on the element before a form may be submitted.

+

Optional aria-roledescription

aria-roledescription?: string

Defines a human-readable, author-localized description for the role of an element.

+

Optional aria-rowcount

aria-rowcount?: number

Defines the total number of rows in a table, grid, or treegrid.

+

See

aria-rowindex.

+

Optional aria-rowindex

aria-rowindex?: number

Defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid.

+

See

    +
  • aria-rowcount
    • +
  • aria-rowspan.
    • +
+

Optional aria-rowindextext

aria-rowindextext?: string

Defines a human readable text alternative of aria-rowindex.

+

See

aria-colindextext.

+

Optional aria-rowspan

aria-rowspan?: number

Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid.

+

See

    +
  • aria-rowindex
    • +
  • aria-colspan.
    • +
+

Optional aria-selected

aria-selected?: Booleanish

Indicates the current "selected" state of various widgets.

+

See

    +
  • aria-checked
    • +
  • aria-pressed.
    • +
+

Optional aria-setsize

aria-setsize?: number

Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.

+

See

aria-posinset.

+

Optional aria-sort

aria-sort?: "none" | "ascending" | "descending" | "other"

Indicates if items in a table or grid are sorted in ascending or descending order.

+

Optional aria-valuemax

aria-valuemax?: number

Defines the maximum allowed value for a range widget.

+

Optional aria-valuemin

aria-valuemin?: number

Defines the minimum allowed value for a range widget.

+

Optional aria-valuenow

aria-valuenow?: number

Defines the current value for a range widget.

+

See

aria-valuetext.

+

Optional aria-valuetext

aria-valuetext?: string

Defines the human readable text alternative of aria-valuenow for a range widget.

+

Optional as

as?: string

Optional async

async?: boolean

Optional autoCapitalize

autoCapitalize?: string

Non-standard Attributes

+

Optional autoComplete

autoComplete?: string

Optional autoCorrect

autoCorrect?: string

Optional autoFocus

autoFocus?: boolean

Optional autoPlay

autoPlay?: boolean

Optional autoSave

autoSave?: string

Optional capture

capture?: boolean | "user" | "environment"

Optional cellPadding

cellPadding?: string | number

Optional cellSpacing

cellSpacing?: string | number

Optional challenge

challenge?: string

Optional charSet

charSet?: string

Optional checked

checked?: boolean

Optional children

children?: ReactNode

Optional cite

cite?: string

Optional classID

classID?: string

Optional className

className?: string

Optional colSpan

colSpan?: number

Optional color

color?: string

Optional cols

cols?: number

Optional content

content?: string

Optional contentEditable

contentEditable?: Booleanish | "inherit" | "plaintext-only"

Optional contextMenu

contextMenu?: string

Optional controls

controls?: boolean

Optional coords

coords?: string

Optional crossOrigin

crossOrigin?: CrossOrigin

Optional dangerouslySetInnerHTML

dangerouslySetInnerHTML?: {
    __html: string | TrustedHTML;
}

Type declaration

  • __html: string | TrustedHTML

    Should be InnerHTML['innerHTML']. +But unfortunately we're mixing renderer-specific type declarations.

    +

Optional data

data?: string

Optional datatype

datatype?: string

Optional dateTime

dateTime?: string

Optional default

default?: boolean

Optional defaultChecked

defaultChecked?: boolean

React-specific Attributes

+

Optional defaultValue

defaultValue?: string | number | readonly string[]

Optional defer

defer?: boolean

Optional dir

dir?: string

Optional disabled

disabled?: boolean

Optional download

download?: any

Optional draggable

draggable?: Booleanish

Optional encType

encType?: string

Optional forcedPages

forcedPages?: ForcedPage[]

Optional form

form?: string

Optional formAction

formAction?: string | ((formData) => void)

Type declaration

    • (formData): void

    • Parameters

      • formData: FormData

      Returns void

Optional formEncType

formEncType?: string

Optional formMethod

formMethod?: string

Optional formNoValidate

formNoValidate?: boolean

Optional formTarget

formTarget?: string

Optional frameBorder

frameBorder?: string | number

Optional headers

headers?: string

Optional height

height?: string | number

Optional hidden

hidden?: boolean

Optional high

high?: number

Optional href

href?: string

Optional hrefLang

hrefLang?: string

Optional htmlFor

htmlFor?: string

Optional httpEquiv

httpEquiv?: string

Optional id

id?: string

Optional inlist

inlist?: any

Optional inputMode

inputMode?: "search" | "text" | "none" | "tel" | "url" | "email" | "numeric" | "decimal"

Hints at the type of data that might be entered by the user while editing the element or its contents

+

See

https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute

+

Optional integrity

integrity?: string

Optional is

is?: string

Specify that a standard HTML element should behave like a defined custom built-in element

+

See

https://html.spec.whatwg.org/multipage/custom-elements.html#attr-is

+

Optional itemID

itemID?: string

Optional itemProp

itemProp?: string

Optional itemRef

itemRef?: string

Optional itemScope

itemScope?: boolean

Optional itemType

itemType?: string

Optional key

key?: null | Key

Optional keyParams

keyParams?: string

Optional keyType

keyType?: string

Optional kind

kind?: string

Optional label

label?: string

Optional lang

lang?: string

Optional list

list?: string

Optional loop

loop?: boolean

Optional low

low?: number

Optional manifest

manifest?: string

Optional marginHeight

marginHeight?: number

Optional marginWidth

marginWidth?: number

Optional max

max?: string | number

Optional maxLength

maxLength?: number

Optional media

media?: string

Optional mediaGroup

mediaGroup?: string

Optional method

method?: string

Optional min

min?: string | number

Optional minLength

minLength?: number

Optional multiple

multiple?: boolean

Optional muted

muted?: boolean

Optional name

name?: string

Optional noValidate

noValidate?: boolean

Optional nonce

nonce?: string

Optional onAbort

onAbort?: ReactEventHandler<HTMLElement>

Media Events

+

Optional onAbortCapture

onAbortCapture?: ReactEventHandler<HTMLElement>

Optional onAnimationEnd

onAnimationEnd?: AnimationEventHandler<HTMLElement>

Optional onAnimationEndCapture

onAnimationEndCapture?: AnimationEventHandler<HTMLElement>

Optional onAnimationIteration

onAnimationIteration?: AnimationEventHandler<HTMLElement>

Optional onAnimationIterationCapture

onAnimationIterationCapture?: AnimationEventHandler<HTMLElement>

Optional onAnimationStart

onAnimationStart?: AnimationEventHandler<HTMLElement>

Animation Events

+

Optional onAnimationStartCapture

onAnimationStartCapture?: AnimationEventHandler<HTMLElement>

Optional onAuxClick

onAuxClick?: MouseEventHandler<HTMLElement>

MouseEvents

+

Optional onAuxClickCapture

onAuxClickCapture?: MouseEventHandler<HTMLElement>

Optional onBeforeInput

onBeforeInput?: FormEventHandler<HTMLElement>

Optional onBeforeInputCapture

onBeforeInputCapture?: FormEventHandler<HTMLElement>

Optional onBlur

onBlur?: FocusEventHandler<HTMLElement>

Optional onBlurCapture

onBlurCapture?: FocusEventHandler<HTMLElement>

Optional onCanPlay

onCanPlay?: ReactEventHandler<HTMLElement>

Optional onCanPlayCapture

onCanPlayCapture?: ReactEventHandler<HTMLElement>

Optional onCanPlayThrough

onCanPlayThrough?: ReactEventHandler<HTMLElement>

Optional onCanPlayThroughCapture

onCanPlayThroughCapture?: ReactEventHandler<HTMLElement>

Optional onChange

onChange?: FormEventHandler<HTMLElement>

Form Events

+

Optional onChangeCapture

onChangeCapture?: FormEventHandler<HTMLElement>

Optional onClick

onClick?: MouseEventHandler<HTMLElement>

Optional onClickCapture

onClickCapture?: MouseEventHandler<HTMLElement>

Optional onCompositionEnd

onCompositionEnd?: CompositionEventHandler<HTMLElement>

Composition Events

+

Optional onCompositionEndCapture

onCompositionEndCapture?: CompositionEventHandler<HTMLElement>

Optional onCompositionStart

onCompositionStart?: CompositionEventHandler<HTMLElement>

Optional onCompositionStartCapture

onCompositionStartCapture?: CompositionEventHandler<HTMLElement>

Optional onCompositionUpdate

onCompositionUpdate?: CompositionEventHandler<HTMLElement>

Optional onCompositionUpdateCapture

onCompositionUpdateCapture?: CompositionEventHandler<HTMLElement>

Optional onContextMenu

onContextMenu?: MouseEventHandler<HTMLElement>

Optional onContextMenuCapture

onContextMenuCapture?: MouseEventHandler<HTMLElement>

Optional onCopy

onCopy?: ClipboardEventHandler<HTMLElement>

Clipboard Events

+

Optional onCopyCapture

onCopyCapture?: ClipboardEventHandler<HTMLElement>

Optional onCut

onCut?: ClipboardEventHandler<HTMLElement>

Optional onCutCapture

onCutCapture?: ClipboardEventHandler<HTMLElement>

Optional onDoubleClick

onDoubleClick?: MouseEventHandler<HTMLElement>

Optional onDoubleClickCapture

onDoubleClickCapture?: MouseEventHandler<HTMLElement>

Optional onDrag

onDrag?: DragEventHandler<HTMLElement>

Optional onDragCapture

onDragCapture?: DragEventHandler<HTMLElement>

Optional onDragEnd

onDragEnd?: DragEventHandler<HTMLElement>

Optional onDragEndCapture

onDragEndCapture?: DragEventHandler<HTMLElement>

Optional onDragEnter

onDragEnter?: DragEventHandler<HTMLElement>

Optional onDragEnterCapture

onDragEnterCapture?: DragEventHandler<HTMLElement>

Optional onDragExit

onDragExit?: DragEventHandler<HTMLElement>

Optional onDragExitCapture

onDragExitCapture?: DragEventHandler<HTMLElement>

Optional onDragLeave

onDragLeave?: DragEventHandler<HTMLElement>

Optional onDragLeaveCapture

onDragLeaveCapture?: DragEventHandler<HTMLElement>

Optional onDragOver

onDragOver?: DragEventHandler<HTMLElement>

Optional onDragOverCapture

onDragOverCapture?: DragEventHandler<HTMLElement>

Optional onDragStart

onDragStart?: DragEventHandler<HTMLElement>

Optional onDragStartCapture

onDragStartCapture?: DragEventHandler<HTMLElement>

Optional onDrop

onDrop?: DragEventHandler<HTMLElement>

Optional onDropCapture

onDropCapture?: DragEventHandler<HTMLElement>

Optional onDurationChange

onDurationChange?: ReactEventHandler<HTMLElement>

Optional onDurationChangeCapture

onDurationChangeCapture?: ReactEventHandler<HTMLElement>

Optional onEmptied

onEmptied?: ReactEventHandler<HTMLElement>

Optional onEmptiedCapture

onEmptiedCapture?: ReactEventHandler<HTMLElement>

Optional onEncrypted

onEncrypted?: ReactEventHandler<HTMLElement>

Optional onEncryptedCapture

onEncryptedCapture?: ReactEventHandler<HTMLElement>

Optional onEnded

onEnded?: ReactEventHandler<HTMLElement>

Optional onEndedCapture

onEndedCapture?: ReactEventHandler<HTMLElement>

Optional onError

onError?: ReactEventHandler<HTMLElement>

Optional onErrorCapture

onErrorCapture?: ReactEventHandler<HTMLElement>

Optional onFocus

onFocus?: FocusEventHandler<HTMLElement>

Focus Events

+

Optional onFocusCapture

onFocusCapture?: FocusEventHandler<HTMLElement>

Optional onGotPointerCapture

onGotPointerCapture?: PointerEventHandler<HTMLElement>

Optional onGotPointerCaptureCapture

onGotPointerCaptureCapture?: PointerEventHandler<HTMLElement>

Optional onInput

onInput?: FormEventHandler<HTMLElement>

Optional onInputCapture

onInputCapture?: FormEventHandler<HTMLElement>

Optional onInvalid

onInvalid?: FormEventHandler<HTMLElement>

Optional onInvalidCapture

onInvalidCapture?: FormEventHandler<HTMLElement>

Optional onKeyDown

onKeyDown?: KeyboardEventHandler<HTMLElement>

Keyboard Events

+

Optional onKeyDownCapture

onKeyDownCapture?: KeyboardEventHandler<HTMLElement>

Optional onKeyPress

onKeyPress?: KeyboardEventHandler<HTMLElement>

Deprecated

Optional onKeyPressCapture

onKeyPressCapture?: KeyboardEventHandler<HTMLElement>

Deprecated

Optional onKeyUp

onKeyUp?: KeyboardEventHandler<HTMLElement>

Optional onKeyUpCapture

onKeyUpCapture?: KeyboardEventHandler<HTMLElement>

Optional onLoad

onLoad?: ReactEventHandler<HTMLElement>

Image Events

+

Optional onLoadCapture

onLoadCapture?: ReactEventHandler<HTMLElement>

Optional onLoadStart

onLoadStart?: ReactEventHandler<HTMLElement>

Optional onLoadStartCapture

onLoadStartCapture?: ReactEventHandler<HTMLElement>

Optional onLoadedData

onLoadedData?: ReactEventHandler<HTMLElement>

Optional onLoadedDataCapture

onLoadedDataCapture?: ReactEventHandler<HTMLElement>

Optional onLoadedMetadata

onLoadedMetadata?: ReactEventHandler<HTMLElement>

Optional onLoadedMetadataCapture

onLoadedMetadataCapture?: ReactEventHandler<HTMLElement>

Optional onLostPointerCapture

onLostPointerCapture?: PointerEventHandler<HTMLElement>

Optional onLostPointerCaptureCapture

onLostPointerCaptureCapture?: PointerEventHandler<HTMLElement>

Optional onMouseDown

onMouseDown?: MouseEventHandler<HTMLElement>

Optional onMouseDownCapture

onMouseDownCapture?: MouseEventHandler<HTMLElement>

Optional onMouseEnter

onMouseEnter?: MouseEventHandler<HTMLElement>

Optional onMouseLeave

onMouseLeave?: MouseEventHandler<HTMLElement>

Optional onMouseMove

onMouseMove?: MouseEventHandler<HTMLElement>

Optional onMouseMoveCapture

onMouseMoveCapture?: MouseEventHandler<HTMLElement>

Optional onMouseOut

onMouseOut?: MouseEventHandler<HTMLElement>

Optional onMouseOutCapture

onMouseOutCapture?: MouseEventHandler<HTMLElement>

Optional onMouseOver

onMouseOver?: MouseEventHandler<HTMLElement>

Optional onMouseOverCapture

onMouseOverCapture?: MouseEventHandler<HTMLElement>

Optional onMouseUp

onMouseUp?: MouseEventHandler<HTMLElement>

Optional onMouseUpCapture

onMouseUpCapture?: MouseEventHandler<HTMLElement>

Optional onPaste

onPaste?: ClipboardEventHandler<HTMLElement>

Optional onPasteCapture

onPasteCapture?: ClipboardEventHandler<HTMLElement>

Optional onPause

onPause?: ReactEventHandler<HTMLElement>

Optional onPauseCapture

onPauseCapture?: ReactEventHandler<HTMLElement>

Optional onPlay

onPlay?: ReactEventHandler<HTMLElement>

Optional onPlayCapture

onPlayCapture?: ReactEventHandler<HTMLElement>

Optional onPlaying

onPlaying?: ReactEventHandler<HTMLElement>

Optional onPlayingCapture

onPlayingCapture?: ReactEventHandler<HTMLElement>

Optional onPointerCancel

onPointerCancel?: PointerEventHandler<HTMLElement>

Optional onPointerCancelCapture

onPointerCancelCapture?: PointerEventHandler<HTMLElement>

Optional onPointerDown

onPointerDown?: PointerEventHandler<HTMLElement>

Pointer Events

+

Optional onPointerDownCapture

onPointerDownCapture?: PointerEventHandler<HTMLElement>

Optional onPointerEnter

onPointerEnter?: PointerEventHandler<HTMLElement>

Optional onPointerEnterCapture

onPointerEnterCapture?: PointerEventHandler<HTMLElement>

Optional onPointerLeave

onPointerLeave?: PointerEventHandler<HTMLElement>

Optional onPointerLeaveCapture

onPointerLeaveCapture?: PointerEventHandler<HTMLElement>

Optional onPointerMove

onPointerMove?: PointerEventHandler<HTMLElement>

Optional onPointerMoveCapture

onPointerMoveCapture?: PointerEventHandler<HTMLElement>

Optional onPointerOut

onPointerOut?: PointerEventHandler<HTMLElement>

Optional onPointerOutCapture

onPointerOutCapture?: PointerEventHandler<HTMLElement>

Optional onPointerOver

onPointerOver?: PointerEventHandler<HTMLElement>

Optional onPointerOverCapture

onPointerOverCapture?: PointerEventHandler<HTMLElement>

Optional onPointerUp

onPointerUp?: PointerEventHandler<HTMLElement>

Optional onPointerUpCapture

onPointerUpCapture?: PointerEventHandler<HTMLElement>

Optional onProgress

onProgress?: ReactEventHandler<HTMLElement>

Optional onProgressCapture

onProgressCapture?: ReactEventHandler<HTMLElement>

Optional onRateChange

onRateChange?: ReactEventHandler<HTMLElement>

Optional onRateChangeCapture

onRateChangeCapture?: ReactEventHandler<HTMLElement>

Optional onReset

onReset?: FormEventHandler<HTMLElement>

Optional onResetCapture

onResetCapture?: FormEventHandler<HTMLElement>

Optional onResize

onResize?: ReactEventHandler<HTMLElement>

Optional onResizeCapture

onResizeCapture?: ReactEventHandler<HTMLElement>

Optional onScroll

onScroll?: UIEventHandler<HTMLElement>

UI Events

+

Optional onScrollCapture

onScrollCapture?: UIEventHandler<HTMLElement>

Optional onSeeked

onSeeked?: ReactEventHandler<HTMLElement>

Optional onSeekedCapture

onSeekedCapture?: ReactEventHandler<HTMLElement>

Optional onSeeking

onSeeking?: ReactEventHandler<HTMLElement>

Optional onSeekingCapture

onSeekingCapture?: ReactEventHandler<HTMLElement>

Optional onSelect

onSelect?: ReactEventHandler<HTMLElement>

Selection Events

+

Optional onSelectCapture

onSelectCapture?: ReactEventHandler<HTMLElement>

Optional onStalled

onStalled?: ReactEventHandler<HTMLElement>

Optional onStalledCapture

onStalledCapture?: ReactEventHandler<HTMLElement>

Optional onSubmit

onSubmit?: FormEventHandler<HTMLElement>

Optional onSubmitCapture

onSubmitCapture?: FormEventHandler<HTMLElement>

Optional onSuspend

onSuspend?: ReactEventHandler<HTMLElement>

Optional onSuspendCapture

onSuspendCapture?: ReactEventHandler<HTMLElement>

Optional onTimeUpdate

onTimeUpdate?: ReactEventHandler<HTMLElement>

Optional onTimeUpdateCapture

onTimeUpdateCapture?: ReactEventHandler<HTMLElement>

Optional onTouchCancel

onTouchCancel?: TouchEventHandler<HTMLElement>

Touch Events

+

Optional onTouchCancelCapture

onTouchCancelCapture?: TouchEventHandler<HTMLElement>

Optional onTouchEnd

onTouchEnd?: TouchEventHandler<HTMLElement>

Optional onTouchEndCapture

onTouchEndCapture?: TouchEventHandler<HTMLElement>

Optional onTouchMove

onTouchMove?: TouchEventHandler<HTMLElement>

Optional onTouchMoveCapture

onTouchMoveCapture?: TouchEventHandler<HTMLElement>

Optional onTouchStart

onTouchStart?: TouchEventHandler<HTMLElement>

Optional onTouchStartCapture

onTouchStartCapture?: TouchEventHandler<HTMLElement>

Optional onTransitionEnd

onTransitionEnd?: TransitionEventHandler<HTMLElement>

Transition Events

+

Optional onTransitionEndCapture

onTransitionEndCapture?: TransitionEventHandler<HTMLElement>

Optional onVolumeChange

onVolumeChange?: ReactEventHandler<HTMLElement>

Optional onVolumeChangeCapture

onVolumeChangeCapture?: ReactEventHandler<HTMLElement>

Optional onWaiting

onWaiting?: ReactEventHandler<HTMLElement>

Optional onWaitingCapture

onWaitingCapture?: ReactEventHandler<HTMLElement>

Optional onWheel

onWheel?: WheelEventHandler<HTMLElement>

Wheel Events

+

Optional onWheelCapture

onWheelCapture?: WheelEventHandler<HTMLElement>

Optional open

open?: boolean

Optional optimum

optimum?: number

Optional pattern

pattern?: string

Optional placeholder

placeholder?: string

Optional playsInline

playsInline?: boolean

Optional poster

poster?: string

Optional prefix

prefix?: string

Optional preload

preload?: string

Optional property

property?: string

Optional radioGroup

radioGroup?: string

Unknown

+

Optional readOnly

readOnly?: boolean

Optional ref

ref?: LegacyRef<HTMLElement>

Allows getting a ref to the component instance. +Once the component unmounts, React will set ref.current to null (or call the ref with null if you passed a callback ref).

+

See

https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom

+

Optional rel

rel?: string

Optional required

required?: boolean

Optional resource

resource?: string

Optional results

results?: number

Optional rev

rev?: string

Optional reversed

reversed?: boolean

Optional role

role?: AriaRole

WAI-ARIA

+

Optional rowSpan

rowSpan?: number

Optional rows

rows?: number

Optional sandbox

sandbox?: string

Optional scope

scope?: string

Optional scoped

scoped?: boolean

Optional scrolling

scrolling?: string

Optional seamless

seamless?: boolean

Optional security

security?: string

Optional selected

selected?: boolean

Optional shape

shape?: string

Optional size

size?: number

Optional sizes

sizes?: string

Optional slot

slot?: string

Optional span

span?: number

Optional spellCheck

spellCheck?: Booleanish

Optional src

src?: string

Optional srcDoc

srcDoc?: string

Optional srcLang

srcLang?: string

Optional srcSet

srcSet?: string

Optional start

start?: number

Optional step

step?: string | number

Optional style

style?: CSSProperties

Optional summary

summary?: string

Optional suppressContentEditableWarning

suppressContentEditableWarning?: boolean

Optional suppressHydrationWarning

suppressHydrationWarning?: boolean

Optional tabIndex

tabIndex?: number

Optional tag

tag?: keyof IntrinsicElements

Default Value

'div'
+
+

Optional target

target?: string

Optional title

title?: string

Optional translate

translate?: "yes" | "no"

Optional type

type?: string

Optional typeof

typeof?: string

Optional unselectable

unselectable?: "on" | "off"

Optional useMap

useMap?: string

Optional value

value?: string | number | readonly string[]

Optional vocab

vocab?: string

Optional width

width?: string | number

Optional wmode

wmode?: string

Optional wrap

wrap?: string

Settings

Member Visibility

Theme

On This Page

Generated using TypeDoc

\ No newline at end of file diff --git a/docs/interfaces/server_nextjs_server_side_wrapper_server_side_wrapper.ServerSideWrapperProps.html b/docs/interfaces/server_nextjs_server_side_wrapper_server_side_wrapper.ServerSideWrapperProps.html new file mode 100644 index 00000000..aadf4528 --- /dev/null +++ b/docs/interfaces/server_nextjs_server_side_wrapper_server_side_wrapper.ServerSideWrapperProps.html @@ -0,0 +1,519 @@ +ServerSideWrapperProps | Code Documentation

Interface ServerSideWrapperProps

interface ServerSideWrapperProps {
    about?: string;
    accept?: string;
    acceptCharset?: string;
    accessKey?: string;
    action?: string | ((formData) => void);
    allowFullScreen?: boolean;
    allowTransparency?: boolean;
    alt?: string;
    aria-activedescendant?: string;
    aria-atomic?: Booleanish;
    aria-autocomplete?: "list" | "none" | "inline" | "both";
    aria-braillelabel?: string;
    aria-brailleroledescription?: string;
    aria-busy?: Booleanish;
    aria-checked?: boolean | "true" | "false" | "mixed";
    aria-colcount?: number;
    aria-colindex?: number;
    aria-colindextext?: string;
    aria-colspan?: number;
    aria-controls?: string;
    aria-current?: boolean | "time" | "page" | "step" | "true" | "false" | "date" | "location";
    aria-describedby?: string;
    aria-description?: string;
    aria-details?: string;
    aria-disabled?: Booleanish;
    aria-dropeffect?: "link" | "none" | "copy" | "execute" | "move" | "popup";
    aria-errormessage?: string;
    aria-expanded?: Booleanish;
    aria-flowto?: string;
    aria-grabbed?: Booleanish;
    aria-haspopup?: boolean | "dialog" | "menu" | "grid" | "listbox" | "tree" | "true" | "false";
    aria-hidden?: Booleanish;
    aria-invalid?: boolean | "true" | "false" | "grammar" | "spelling";
    aria-keyshortcuts?: string;
    aria-label?: string;
    aria-labelledby?: string;
    aria-level?: number;
    aria-live?: "off" | "assertive" | "polite";
    aria-modal?: Booleanish;
    aria-multiline?: Booleanish;
    aria-multiselectable?: Booleanish;
    aria-orientation?: "horizontal" | "vertical";
    aria-owns?: string;
    aria-placeholder?: string;
    aria-posinset?: number;
    aria-pressed?: boolean | "true" | "false" | "mixed";
    aria-readonly?: Booleanish;
    aria-relevant?: "text" | "all" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals";
    aria-required?: Booleanish;
    aria-roledescription?: string;
    aria-rowcount?: number;
    aria-rowindex?: number;
    aria-rowindextext?: string;
    aria-rowspan?: number;
    aria-selected?: Booleanish;
    aria-setsize?: number;
    aria-sort?: "none" | "ascending" | "descending" | "other";
    aria-valuemax?: number;
    aria-valuemin?: number;
    aria-valuenow?: number;
    aria-valuetext?: string;
    as?: string;
    async?: boolean;
    autoCapitalize?: string;
    autoComplete?: string;
    autoCorrect?: string;
    autoFocus?: boolean;
    autoPlay?: boolean;
    autoSave?: string;
    capture?: boolean | "user" | "environment";
    cellPadding?: string | number;
    cellSpacing?: string | number;
    challenge?: string;
    charSet?: string;
    checked?: boolean;
    children?: ReactNode;
    cite?: string;
    classID?: string;
    className?: string;
    colSpan?: number;
    color?: string;
    cols?: number;
    content?: string;
    contentEditable?: Booleanish | "inherit" | "plaintext-only";
    contextMenu?: string;
    controls?: boolean;
    coords?: string;
    crossOrigin?: CrossOrigin;
    dangerouslySetInnerHTML?: {
        __html: string | TrustedHTML;
    };
    data?: string;
    datatype?: string;
    dateTime?: string;
    default?: boolean;
    defaultChecked?: boolean;
    defaultValue?: string | number | readonly string[];
    defer?: boolean;
    dir?: string;
    disabled?: boolean;
    download?: any;
    draggable?: Booleanish;
    encType?: string;
    forcedPages?: ForcedPage[];
    form?: string;
    formAction?: string | ((formData) => void);
    formEncType?: string;
    formMethod?: string;
    formNoValidate?: boolean;
    formTarget?: string;
    frameBorder?: string | number;
    headers?: string;
    height?: string | number;
    hidden?: boolean;
    high?: number;
    href?: string;
    hrefLang?: string;
    htmlFor?: string;
    httpEquiv?: string;
    id?: string;
    inlist?: any;
    inputMode?: "search" | "text" | "none" | "tel" | "url" | "email" | "numeric" | "decimal";
    integrity?: string;
    is?: string;
    itemID?: string;
    itemProp?: string;
    itemRef?: string;
    itemScope?: boolean;
    itemType?: string;
    key?: null | Key;
    keyParams?: string;
    keyType?: string;
    kind?: string;
    label?: string;
    lang?: string;
    list?: string;
    loop?: boolean;
    low?: number;
    manifest?: string;
    marginHeight?: number;
    marginWidth?: number;
    max?: string | number;
    maxLength?: number;
    media?: string;
    mediaGroup?: string;
    method?: string;
    min?: string | number;
    minLength?: number;
    multiple?: boolean;
    muted?: boolean;
    name?: string;
    noValidate?: boolean;
    nonce?: string;
    onAbort?: ReactEventHandler<HTMLElement>;
    onAbortCapture?: ReactEventHandler<HTMLElement>;
    onAnimationEnd?: AnimationEventHandler<HTMLElement>;
    onAnimationEndCapture?: AnimationEventHandler<HTMLElement>;
    onAnimationIteration?: AnimationEventHandler<HTMLElement>;
    onAnimationIterationCapture?: AnimationEventHandler<HTMLElement>;
    onAnimationStart?: AnimationEventHandler<HTMLElement>;
    onAnimationStartCapture?: AnimationEventHandler<HTMLElement>;
    onAuxClick?: MouseEventHandler<HTMLElement>;
    onAuxClickCapture?: MouseEventHandler<HTMLElement>;
    onBeforeInput?: FormEventHandler<HTMLElement>;
    onBeforeInputCapture?: FormEventHandler<HTMLElement>;
    onBlur?: FocusEventHandler<HTMLElement>;
    onBlurCapture?: FocusEventHandler<HTMLElement>;
    onCanPlay?: ReactEventHandler<HTMLElement>;
    onCanPlayCapture?: ReactEventHandler<HTMLElement>;
    onCanPlayThrough?: ReactEventHandler<HTMLElement>;
    onCanPlayThroughCapture?: ReactEventHandler<HTMLElement>;
    onChange?: FormEventHandler<HTMLElement>;
    onChangeCapture?: FormEventHandler<HTMLElement>;
    onClick?: MouseEventHandler<HTMLElement>;
    onClickCapture?: MouseEventHandler<HTMLElement>;
    onCompositionEnd?: CompositionEventHandler<HTMLElement>;
    onCompositionEndCapture?: CompositionEventHandler<HTMLElement>;
    onCompositionStart?: CompositionEventHandler<HTMLElement>;
    onCompositionStartCapture?: CompositionEventHandler<HTMLElement>;
    onCompositionUpdate?: CompositionEventHandler<HTMLElement>;
    onCompositionUpdateCapture?: CompositionEventHandler<HTMLElement>;
    onContextMenu?: MouseEventHandler<HTMLElement>;
    onContextMenuCapture?: MouseEventHandler<HTMLElement>;
    onCopy?: ClipboardEventHandler<HTMLElement>;
    onCopyCapture?: ClipboardEventHandler<HTMLElement>;
    onCut?: ClipboardEventHandler<HTMLElement>;
    onCutCapture?: ClipboardEventHandler<HTMLElement>;
    onDoubleClick?: MouseEventHandler<HTMLElement>;
    onDoubleClickCapture?: MouseEventHandler<HTMLElement>;
    onDrag?: DragEventHandler<HTMLElement>;
    onDragCapture?: DragEventHandler<HTMLElement>;
    onDragEnd?: DragEventHandler<HTMLElement>;
    onDragEndCapture?: DragEventHandler<HTMLElement>;
    onDragEnter?: DragEventHandler<HTMLElement>;
    onDragEnterCapture?: DragEventHandler<HTMLElement>;
    onDragExit?: DragEventHandler<HTMLElement>;
    onDragExitCapture?: DragEventHandler<HTMLElement>;
    onDragLeave?: DragEventHandler<HTMLElement>;
    onDragLeaveCapture?: DragEventHandler<HTMLElement>;
    onDragOver?: DragEventHandler<HTMLElement>;
    onDragOverCapture?: DragEventHandler<HTMLElement>;
    onDragStart?: DragEventHandler<HTMLElement>;
    onDragStartCapture?: DragEventHandler<HTMLElement>;
    onDrop?: DragEventHandler<HTMLElement>;
    onDropCapture?: DragEventHandler<HTMLElement>;
    onDurationChange?: ReactEventHandler<HTMLElement>;
    onDurationChangeCapture?: ReactEventHandler<HTMLElement>;
    onEmptied?: ReactEventHandler<HTMLElement>;
    onEmptiedCapture?: ReactEventHandler<HTMLElement>;
    onEncrypted?: ReactEventHandler<HTMLElement>;
    onEncryptedCapture?: ReactEventHandler<HTMLElement>;
    onEnded?: ReactEventHandler<HTMLElement>;
    onEndedCapture?: ReactEventHandler<HTMLElement>;
    onError?: ReactEventHandler<HTMLElement>;
    onErrorCapture?: ReactEventHandler<HTMLElement>;
    onFocus?: FocusEventHandler<HTMLElement>;
    onFocusCapture?: FocusEventHandler<HTMLElement>;
    onGotPointerCapture?: PointerEventHandler<HTMLElement>;
    onGotPointerCaptureCapture?: PointerEventHandler<HTMLElement>;
    onInput?: FormEventHandler<HTMLElement>;
    onInputCapture?: FormEventHandler<HTMLElement>;
    onInvalid?: FormEventHandler<HTMLElement>;
    onInvalidCapture?: FormEventHandler<HTMLElement>;
    onKeyDown?: KeyboardEventHandler<HTMLElement>;
    onKeyDownCapture?: KeyboardEventHandler<HTMLElement>;
    onKeyPress?: KeyboardEventHandler<HTMLElement>;
    onKeyPressCapture?: KeyboardEventHandler<HTMLElement>;
    onKeyUp?: KeyboardEventHandler<HTMLElement>;
    onKeyUpCapture?: KeyboardEventHandler<HTMLElement>;
    onLoad?: ReactEventHandler<HTMLElement>;
    onLoadCapture?: ReactEventHandler<HTMLElement>;
    onLoadStart?: ReactEventHandler<HTMLElement>;
    onLoadStartCapture?: ReactEventHandler<HTMLElement>;
    onLoadedData?: ReactEventHandler<HTMLElement>;
    onLoadedDataCapture?: ReactEventHandler<HTMLElement>;
    onLoadedMetadata?: ReactEventHandler<HTMLElement>;
    onLoadedMetadataCapture?: ReactEventHandler<HTMLElement>;
    onLostPointerCapture?: PointerEventHandler<HTMLElement>;
    onLostPointerCaptureCapture?: PointerEventHandler<HTMLElement>;
    onMouseDown?: MouseEventHandler<HTMLElement>;
    onMouseDownCapture?: MouseEventHandler<HTMLElement>;
    onMouseEnter?: MouseEventHandler<HTMLElement>;
    onMouseLeave?: MouseEventHandler<HTMLElement>;
    onMouseMove?: MouseEventHandler<HTMLElement>;
    onMouseMoveCapture?: MouseEventHandler<HTMLElement>;
    onMouseOut?: MouseEventHandler<HTMLElement>;
    onMouseOutCapture?: MouseEventHandler<HTMLElement>;
    onMouseOver?: MouseEventHandler<HTMLElement>;
    onMouseOverCapture?: MouseEventHandler<HTMLElement>;
    onMouseUp?: MouseEventHandler<HTMLElement>;
    onMouseUpCapture?: MouseEventHandler<HTMLElement>;
    onPaste?: ClipboardEventHandler<HTMLElement>;
    onPasteCapture?: ClipboardEventHandler<HTMLElement>;
    onPause?: ReactEventHandler<HTMLElement>;
    onPauseCapture?: ReactEventHandler<HTMLElement>;
    onPlay?: ReactEventHandler<HTMLElement>;
    onPlayCapture?: ReactEventHandler<HTMLElement>;
    onPlaying?: ReactEventHandler<HTMLElement>;
    onPlayingCapture?: ReactEventHandler<HTMLElement>;
    onPointerCancel?: PointerEventHandler<HTMLElement>;
    onPointerCancelCapture?: PointerEventHandler<HTMLElement>;
    onPointerDown?: PointerEventHandler<HTMLElement>;
    onPointerDownCapture?: PointerEventHandler<HTMLElement>;
    onPointerEnter?: PointerEventHandler<HTMLElement>;
    onPointerEnterCapture?: PointerEventHandler<HTMLElement>;
    onPointerLeave?: PointerEventHandler<HTMLElement>;
    onPointerLeaveCapture?: PointerEventHandler<HTMLElement>;
    onPointerMove?: PointerEventHandler<HTMLElement>;
    onPointerMoveCapture?: PointerEventHandler<HTMLElement>;
    onPointerOut?: PointerEventHandler<HTMLElement>;
    onPointerOutCapture?: PointerEventHandler<HTMLElement>;
    onPointerOver?: PointerEventHandler<HTMLElement>;
    onPointerOverCapture?: PointerEventHandler<HTMLElement>;
    onPointerUp?: PointerEventHandler<HTMLElement>;
    onPointerUpCapture?: PointerEventHandler<HTMLElement>;
    onProgress?: ReactEventHandler<HTMLElement>;
    onProgressCapture?: ReactEventHandler<HTMLElement>;
    onRateChange?: ReactEventHandler<HTMLElement>;
    onRateChangeCapture?: ReactEventHandler<HTMLElement>;
    onReset?: FormEventHandler<HTMLElement>;
    onResetCapture?: FormEventHandler<HTMLElement>;
    onResize?: ReactEventHandler<HTMLElement>;
    onResizeCapture?: ReactEventHandler<HTMLElement>;
    onScroll?: UIEventHandler<HTMLElement>;
    onScrollCapture?: UIEventHandler<HTMLElement>;
    onSeeked?: ReactEventHandler<HTMLElement>;
    onSeekedCapture?: ReactEventHandler<HTMLElement>;
    onSeeking?: ReactEventHandler<HTMLElement>;
    onSeekingCapture?: ReactEventHandler<HTMLElement>;
    onSelect?: ReactEventHandler<HTMLElement>;
    onSelectCapture?: ReactEventHandler<HTMLElement>;
    onStalled?: ReactEventHandler<HTMLElement>;
    onStalledCapture?: ReactEventHandler<HTMLElement>;
    onSubmit?: FormEventHandler<HTMLElement>;
    onSubmitCapture?: FormEventHandler<HTMLElement>;
    onSuspend?: ReactEventHandler<HTMLElement>;
    onSuspendCapture?: ReactEventHandler<HTMLElement>;
    onTimeUpdate?: ReactEventHandler<HTMLElement>;
    onTimeUpdateCapture?: ReactEventHandler<HTMLElement>;
    onTouchCancel?: TouchEventHandler<HTMLElement>;
    onTouchCancelCapture?: TouchEventHandler<HTMLElement>;
    onTouchEnd?: TouchEventHandler<HTMLElement>;
    onTouchEndCapture?: TouchEventHandler<HTMLElement>;
    onTouchMove?: TouchEventHandler<HTMLElement>;
    onTouchMoveCapture?: TouchEventHandler<HTMLElement>;
    onTouchStart?: TouchEventHandler<HTMLElement>;
    onTouchStartCapture?: TouchEventHandler<HTMLElement>;
    onTransitionEnd?: TransitionEventHandler<HTMLElement>;
    onTransitionEndCapture?: TransitionEventHandler<HTMLElement>;
    onVolumeChange?: ReactEventHandler<HTMLElement>;
    onVolumeChangeCapture?: ReactEventHandler<HTMLElement>;
    onWaiting?: ReactEventHandler<HTMLElement>;
    onWaitingCapture?: ReactEventHandler<HTMLElement>;
    onWheel?: WheelEventHandler<HTMLElement>;
    onWheelCapture?: WheelEventHandler<HTMLElement>;
    open?: boolean;
    optimum?: number;
    pattern?: string;
    placeholder?: string;
    playsInline?: boolean;
    poster?: string;
    prefix?: string;
    preload?: string;
    property?: string;
    radioGroup?: string;
    readOnly?: boolean;
    ref?: LegacyRef<HTMLElement>;
    rel?: string;
    required?: boolean;
    resource?: string;
    results?: number;
    rev?: string;
    reversed?: boolean;
    role?: AriaRole;
    rowSpan?: number;
    rows?: number;
    sandbox?: string;
    scope?: string;
    scoped?: boolean;
    scrolling?: string;
    seamless?: boolean;
    security?: string;
    selected?: boolean;
    shape?: string;
    size?: number;
    sizes?: string;
    slot?: string;
    span?: number;
    spellCheck?: Booleanish;
    src?: string;
    srcDoc?: string;
    srcLang?: string;
    srcSet?: string;
    start?: number;
    step?: string | number;
    style?: CSSProperties;
    summary?: string;
    suppressContentEditableWarning?: boolean;
    suppressHydrationWarning?: boolean;
    tabIndex?: number;
    tag?: keyof IntrinsicElements;
    target?: string;
    title?: string;
    translate?: "yes" | "no";
    type?: string;
    typeof?: string;
    unselectable?: "on" | "off";
    useMap?: string;
    value?: string | number | readonly string[];
    vocab?: string;
    width?: string | number;
    wmode?: string;
    wrap?: string;
}

Hierarchy

Properties

about? +accept? +acceptCharset? +accessKey? +action? +allowFullScreen? +allowTransparency? +alt? +aria-activedescendant? +aria-atomic? +aria-autocomplete? +aria-braillelabel? +aria-brailleroledescription? +aria-busy? +aria-checked? +aria-colcount? +aria-colindex? +aria-colindextext? +aria-colspan? +aria-controls? +aria-current? +aria-describedby? +aria-description? +aria-details? +aria-disabled? +aria-dropeffect? +aria-errormessage? +aria-expanded? +aria-flowto? +aria-grabbed? +aria-haspopup? +aria-hidden? +aria-invalid? +aria-keyshortcuts? +aria-label? +aria-labelledby? +aria-level? +aria-live? +aria-modal? +aria-multiline? +aria-multiselectable? +aria-orientation? +aria-owns? +aria-placeholder? +aria-posinset? +aria-pressed? +aria-readonly? +aria-relevant? +aria-required? +aria-roledescription? +aria-rowcount? +aria-rowindex? +aria-rowindextext? +aria-rowspan? +aria-selected? +aria-setsize? +aria-sort? +aria-valuemax? +aria-valuemin? +aria-valuenow? +aria-valuetext? +as? +async? +autoCapitalize? +autoComplete? +autoCorrect? +autoFocus? +autoPlay? +autoSave? +capture? +cellPadding? +cellSpacing? +challenge? +charSet? +checked? +children? +cite? +classID? +className? +colSpan? +color? +cols? +content? +contentEditable? +contextMenu? +controls? +coords? +crossOrigin? +dangerouslySetInnerHTML? +data? +datatype? +dateTime? +default? +defaultChecked? +defaultValue? +defer? +dir? +disabled? +download? +draggable? +encType? +forcedPages? +form? +formAction? +formEncType? +formMethod? +formNoValidate? +formTarget? +frameBorder? +headers? +height? +hidden? +high? +href? +hrefLang? +htmlFor? +httpEquiv? +id? +inlist? +inputMode? +integrity? +is? +itemID? +itemProp? +itemRef? +itemScope? +itemType? +key? +keyParams? +keyType? +kind? +label? +lang? +list? +loop? +low? +manifest? +marginHeight? +marginWidth? +max? +maxLength? +media? +mediaGroup? +method? +min? +minLength? +multiple? +muted? +name? +noValidate? +nonce? +onAbort? +onAbortCapture? +onAnimationEnd? +onAnimationEndCapture? +onAnimationIteration? +onAnimationIterationCapture? +onAnimationStart? +onAnimationStartCapture? +onAuxClick? +onAuxClickCapture? +onBeforeInput? +onBeforeInputCapture? +onBlur? +onBlurCapture? +onCanPlay? +onCanPlayCapture? +onCanPlayThrough? +onCanPlayThroughCapture? +onChange? +onChangeCapture? +onClick? +onClickCapture? +onCompositionEnd? +onCompositionEndCapture? +onCompositionStart? +onCompositionStartCapture? +onCompositionUpdate? +onCompositionUpdateCapture? +onContextMenu? +onContextMenuCapture? +onCopy? +onCopyCapture? +onCut? +onCutCapture? +onDoubleClick? +onDoubleClickCapture? +onDrag? +onDragCapture? +onDragEnd? +onDragEndCapture? +onDragEnter? +onDragEnterCapture? +onDragExit? +onDragExitCapture? +onDragLeave? +onDragLeaveCapture? +onDragOver? +onDragOverCapture? +onDragStart? +onDragStartCapture? +onDrop? +onDropCapture? +onDurationChange? +onDurationChangeCapture? +onEmptied? +onEmptiedCapture? +onEncrypted? +onEncryptedCapture? +onEnded? +onEndedCapture? +onError? +onErrorCapture? +onFocus? +onFocusCapture? +onGotPointerCapture? +onGotPointerCaptureCapture? +onInput? +onInputCapture? +onInvalid? +onInvalidCapture? +onKeyDown? +onKeyDownCapture? +onKeyPress? +onKeyPressCapture? +onKeyUp? +onKeyUpCapture? +onLoad? +onLoadCapture? +onLoadStart? +onLoadStartCapture? +onLoadedData? +onLoadedDataCapture? +onLoadedMetadata? +onLoadedMetadataCapture? +onLostPointerCapture? +onLostPointerCaptureCapture? +onMouseDown? +onMouseDownCapture? +onMouseEnter? +onMouseLeave? +onMouseMove? +onMouseMoveCapture? +onMouseOut? +onMouseOutCapture? +onMouseOver? +onMouseOverCapture? +onMouseUp? +onMouseUpCapture? +onPaste? +onPasteCapture? +onPause? +onPauseCapture? +onPlay? +onPlayCapture? +onPlaying? +onPlayingCapture? +onPointerCancel? +onPointerCancelCapture? +onPointerDown? +onPointerDownCapture? +onPointerEnter? +onPointerEnterCapture? +onPointerLeave? +onPointerLeaveCapture? +onPointerMove? +onPointerMoveCapture? +onPointerOut? +onPointerOutCapture? +onPointerOver? +onPointerOverCapture? +onPointerUp? +onPointerUpCapture? +onProgress? +onProgressCapture? +onRateChange? +onRateChangeCapture? +onReset? +onResetCapture? +onResize? +onResizeCapture? +onScroll? +onScrollCapture? +onSeeked? +onSeekedCapture? +onSeeking? +onSeekingCapture? +onSelect? +onSelectCapture? +onStalled? +onStalledCapture? +onSubmit? +onSubmitCapture? +onSuspend? +onSuspendCapture? +onTimeUpdate? +onTimeUpdateCapture? +onTouchCancel? +onTouchCancelCapture? +onTouchEnd? +onTouchEndCapture? +onTouchMove? +onTouchMoveCapture? +onTouchStart? +onTouchStartCapture? +onTransitionEnd? +onTransitionEndCapture? +onVolumeChange? +onVolumeChangeCapture? +onWaiting? +onWaitingCapture? +onWheel? +onWheelCapture? +open? +optimum? +pattern? +placeholder? +playsInline? +poster? +prefix? +preload? +property? +radioGroup? +readOnly? +ref? +rel? +required? +resource? +results? +rev? +reversed? +role? +rowSpan? +rows? +sandbox? +scope? +scoped? +scrolling? +seamless? +security? +selected? +shape? +size? +sizes? +slot? +span? +spellCheck? +src? +srcDoc? +srcLang? +srcSet? +start? +step? +style? +summary? +suppressContentEditableWarning? +suppressHydrationWarning? +tabIndex? +tag? +target? +title? +translate? +type? +typeof? +unselectable? +useMap? +value? +vocab? +width? +wmode? +wrap? +

Properties

Optional about

about?: string

RDFa Attributes

+

Optional accept

accept?: string

Standard HTML Attributes

+

Optional acceptCharset

acceptCharset?: string

Optional accessKey

accessKey?: string

Standard HTML Attributes

+

Optional action

action?: string | ((formData) => void)

Type declaration

    • (formData): void

    • Parameters

      • formData: FormData

      Returns void

Optional allowFullScreen

allowFullScreen?: boolean

Optional allowTransparency

allowTransparency?: boolean

Optional alt

alt?: string

Optional aria-activedescendant

aria-activedescendant?: string

Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application.

+

Optional aria-atomic

aria-atomic?: Booleanish

Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute.

+

Optional aria-autocomplete

aria-autocomplete?: "list" | "none" | "inline" | "both"

Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be +presented if they are made.

+

Optional aria-braillelabel

aria-braillelabel?: string

Defines a string value that labels the current element, which is intended to be converted into Braille.

+

See

aria-label.

+

Optional aria-brailleroledescription

aria-brailleroledescription?: string

Defines a human-readable, author-localized abbreviated description for the role of an element, which is intended to be converted into Braille.

+

See

aria-roledescription.

+

Optional aria-busy

aria-busy?: Booleanish

Optional aria-checked

aria-checked?: boolean | "true" | "false" | "mixed"

Indicates the current "checked" state of checkboxes, radio buttons, and other widgets.

+

See

    +
  • aria-pressed
    • +
  • aria-selected.
    • +
+

Optional aria-colcount

aria-colcount?: number

Defines the total number of columns in a table, grid, or treegrid.

+

See

aria-colindex.

+

Optional aria-colindex

aria-colindex?: number

Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid.

+

See

    +
  • aria-colcount
    • +
  • aria-colspan.
    • +
+

Optional aria-colindextext

aria-colindextext?: string

Defines a human readable text alternative of aria-colindex.

+

See

aria-rowindextext.

+

Optional aria-colspan

aria-colspan?: number

Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid.

+

See

    +
  • aria-colindex
    • +
  • aria-rowspan.
    • +
+

Optional aria-controls

aria-controls?: string

Identifies the element (or elements) whose contents or presence are controlled by the current element.

+

See

aria-owns.

+

Optional aria-current

aria-current?: boolean | "time" | "page" | "step" | "true" | "false" | "date" | "location"

Indicates the element that represents the current item within a container or set of related elements.

+

Optional aria-describedby

aria-describedby?: string

Identifies the element (or elements) that describes the object.

+

See

aria-labelledby

+

Optional aria-description

aria-description?: string

Defines a string value that describes or annotates the current element.

+

See

related aria-describedby.

+

Optional aria-details

aria-details?: string

Identifies the element that provides a detailed, extended description for the object.

+

See

aria-describedby.

+

Optional aria-disabled

aria-disabled?: Booleanish

Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.

+

See

    +
  • aria-hidden
    • +
  • aria-readonly.
    • +
+

Optional aria-dropeffect

aria-dropeffect?: "link" | "none" | "copy" | "execute" | "move" | "popup"

Indicates what functions can be performed when a dragged object is released on the drop target.

+

Deprecated

in ARIA 1.1

+

Optional aria-errormessage

aria-errormessage?: string

Identifies the element that provides an error message for the object.

+

See

    +
  • aria-invalid
    • +
  • aria-describedby.
    • +
+

Optional aria-expanded

aria-expanded?: Booleanish

Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed.

+

Optional aria-flowto

aria-flowto?: string

Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion, +allows assistive technology to override the general default of reading in document source order.

+

Optional aria-grabbed

aria-grabbed?: Booleanish

Indicates an element's "grabbed" state in a drag-and-drop operation.

+

Deprecated

in ARIA 1.1

+

Optional aria-haspopup

aria-haspopup?: boolean | "dialog" | "menu" | "grid" | "listbox" | "tree" | "true" | "false"

Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element.

+

Optional aria-hidden

aria-hidden?: Booleanish

Indicates whether the element is exposed to an accessibility API.

+

See

aria-disabled.

+

Optional aria-invalid

aria-invalid?: boolean | "true" | "false" | "grammar" | "spelling"

Indicates the entered value does not conform to the format expected by the application.

+

See

aria-errormessage.

+

Optional aria-keyshortcuts

aria-keyshortcuts?: string

Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element.

+

Optional aria-label

aria-label?: string

Defines a string value that labels the current element.

+

See

aria-labelledby.

+

Optional aria-labelledby

aria-labelledby?: string

Identifies the element (or elements) that labels the current element.

+

See

aria-describedby.

+

Optional aria-level

aria-level?: number

Defines the hierarchical level of an element within a structure.

+

Optional aria-live

aria-live?: "off" | "assertive" | "polite"

Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region.

+

Optional aria-modal

aria-modal?: Booleanish

Indicates whether an element is modal when displayed.

+

Optional aria-multiline

aria-multiline?: Booleanish

Indicates whether a text box accepts multiple lines of input or only a single line.

+

Optional aria-multiselectable

aria-multiselectable?: Booleanish

Indicates that the user may select more than one item from the current selectable descendants.

+

Optional aria-orientation

aria-orientation?: "horizontal" | "vertical"

Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous.

+

Optional aria-owns

aria-owns?: string

Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship +between DOM elements where the DOM hierarchy cannot be used to represent the relationship.

+

See

aria-controls.

+

Optional aria-placeholder

aria-placeholder?: string

Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value. +A hint could be a sample value or a brief description of the expected format.

+

Optional aria-posinset

aria-posinset?: number

Defines an element's number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.

+

See

aria-setsize.

+

Optional aria-pressed

aria-pressed?: boolean | "true" | "false" | "mixed"

Indicates the current "pressed" state of toggle buttons.

+

See

    +
  • aria-checked
    • +
  • aria-selected.
    • +
+

Optional aria-readonly

aria-readonly?: Booleanish

Indicates that the element is not editable, but is otherwise operable.

+

See

aria-disabled.

+

Optional aria-relevant

aria-relevant?: "text" | "all" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals"

Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified.

+

See

aria-atomic.

+

Optional aria-required

aria-required?: Booleanish

Indicates that user input is required on the element before a form may be submitted.

+

Optional aria-roledescription

aria-roledescription?: string

Defines a human-readable, author-localized description for the role of an element.

+

Optional aria-rowcount

aria-rowcount?: number

Defines the total number of rows in a table, grid, or treegrid.

+

See

aria-rowindex.

+

Optional aria-rowindex

aria-rowindex?: number

Defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid.

+

See

    +
  • aria-rowcount
    • +
  • aria-rowspan.
    • +
+

Optional aria-rowindextext

aria-rowindextext?: string

Defines a human readable text alternative of aria-rowindex.

+

See

aria-colindextext.

+

Optional aria-rowspan

aria-rowspan?: number

Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid.

+

See

    +
  • aria-rowindex
    • +
  • aria-colspan.
    • +
+

Optional aria-selected

aria-selected?: Booleanish

Indicates the current "selected" state of various widgets.

+

See

    +
  • aria-checked
    • +
  • aria-pressed.
    • +
+

Optional aria-setsize

aria-setsize?: number

Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.

+

See

aria-posinset.

+

Optional aria-sort

aria-sort?: "none" | "ascending" | "descending" | "other"

Indicates if items in a table or grid are sorted in ascending or descending order.

+

Optional aria-valuemax

aria-valuemax?: number

Defines the maximum allowed value for a range widget.

+

Optional aria-valuemin

aria-valuemin?: number

Defines the minimum allowed value for a range widget.

+

Optional aria-valuenow

aria-valuenow?: number

Defines the current value for a range widget.

+

See

aria-valuetext.

+

Optional aria-valuetext

aria-valuetext?: string

Defines the human readable text alternative of aria-valuenow for a range widget.

+

Optional as

as?: string

Optional async

async?: boolean

Optional autoCapitalize

autoCapitalize?: string

Non-standard Attributes

+

Optional autoComplete

autoComplete?: string

Optional autoCorrect

autoCorrect?: string

Optional autoFocus

autoFocus?: boolean

Optional autoPlay

autoPlay?: boolean

Optional autoSave

autoSave?: string

Optional capture

capture?: boolean | "user" | "environment"

Optional cellPadding

cellPadding?: string | number

Optional cellSpacing

cellSpacing?: string | number

Optional challenge

challenge?: string

Optional charSet

charSet?: string

Optional checked

checked?: boolean

Optional children

children?: ReactNode

Optional cite

cite?: string

Optional classID

classID?: string

Optional className

className?: string

Optional colSpan

colSpan?: number

Optional color

color?: string

Optional cols

cols?: number

Optional content

content?: string

Optional contentEditable

contentEditable?: Booleanish | "inherit" | "plaintext-only"

Optional contextMenu

contextMenu?: string

Optional controls

controls?: boolean

Optional coords

coords?: string

Optional crossOrigin

crossOrigin?: CrossOrigin

Optional dangerouslySetInnerHTML

dangerouslySetInnerHTML?: {
    __html: string | TrustedHTML;
}

Type declaration

  • __html: string | TrustedHTML

    Should be InnerHTML['innerHTML']. +But unfortunately we're mixing renderer-specific type declarations.

    +

Optional data

data?: string

Optional datatype

datatype?: string

Optional dateTime

dateTime?: string

Optional default

default?: boolean

Optional defaultChecked

defaultChecked?: boolean

React-specific Attributes

+

Optional defaultValue

defaultValue?: string | number | readonly string[]

Optional defer

defer?: boolean

Optional dir

dir?: string

Optional disabled

disabled?: boolean

Optional download

download?: any

Optional draggable

draggable?: Booleanish

Optional encType

encType?: string

Optional forcedPages

forcedPages?: ForcedPage[]

Optional form

form?: string

Optional formAction

formAction?: string | ((formData) => void)

Type declaration

    • (formData): void

    • Parameters

      • formData: FormData

      Returns void

Optional formEncType

formEncType?: string

Optional formMethod

formMethod?: string

Optional formNoValidate

formNoValidate?: boolean

Optional formTarget

formTarget?: string

Optional frameBorder

frameBorder?: string | number

Optional headers

headers?: string

Optional height

height?: string | number

Optional hidden

hidden?: boolean

Optional high

high?: number

Optional href

href?: string

Optional hrefLang

hrefLang?: string

Optional htmlFor

htmlFor?: string

Optional httpEquiv

httpEquiv?: string

Optional id

id?: string

Optional inlist

inlist?: any

Optional inputMode

inputMode?: "search" | "text" | "none" | "tel" | "url" | "email" | "numeric" | "decimal"

Hints at the type of data that might be entered by the user while editing the element or its contents

+

See

https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute

+

Optional integrity

integrity?: string

Optional is

is?: string

Specify that a standard HTML element should behave like a defined custom built-in element

+

See

https://html.spec.whatwg.org/multipage/custom-elements.html#attr-is

+

Optional itemID

itemID?: string

Optional itemProp

itemProp?: string

Optional itemRef

itemRef?: string

Optional itemScope

itemScope?: boolean

Optional itemType

itemType?: string

Optional key

key?: null | Key

Optional keyParams

keyParams?: string

Optional keyType

keyType?: string

Optional kind

kind?: string

Optional label

label?: string

Optional lang

lang?: string

Optional list

list?: string

Optional loop

loop?: boolean

Optional low

low?: number

Optional manifest

manifest?: string

Optional marginHeight

marginHeight?: number

Optional marginWidth

marginWidth?: number

Optional max

max?: string | number

Optional maxLength

maxLength?: number

Optional media

media?: string

Optional mediaGroup

mediaGroup?: string

Optional method

method?: string

Optional min

min?: string | number

Optional minLength

minLength?: number

Optional multiple

multiple?: boolean

Optional muted

muted?: boolean

Optional name

name?: string

Optional noValidate

noValidate?: boolean

Optional nonce

nonce?: string

Optional onAbort

onAbort?: ReactEventHandler<HTMLElement>

Media Events

+

Optional onAbortCapture

onAbortCapture?: ReactEventHandler<HTMLElement>

Optional onAnimationEnd

onAnimationEnd?: AnimationEventHandler<HTMLElement>

Optional onAnimationEndCapture

onAnimationEndCapture?: AnimationEventHandler<HTMLElement>

Optional onAnimationIteration

onAnimationIteration?: AnimationEventHandler<HTMLElement>

Optional onAnimationIterationCapture

onAnimationIterationCapture?: AnimationEventHandler<HTMLElement>

Optional onAnimationStart

onAnimationStart?: AnimationEventHandler<HTMLElement>

Animation Events

+

Optional onAnimationStartCapture

onAnimationStartCapture?: AnimationEventHandler<HTMLElement>

Optional onAuxClick

onAuxClick?: MouseEventHandler<HTMLElement>

MouseEvents

+

Optional onAuxClickCapture

onAuxClickCapture?: MouseEventHandler<HTMLElement>

Optional onBeforeInput

onBeforeInput?: FormEventHandler<HTMLElement>

Optional onBeforeInputCapture

onBeforeInputCapture?: FormEventHandler<HTMLElement>

Optional onBlur

onBlur?: FocusEventHandler<HTMLElement>

Optional onBlurCapture

onBlurCapture?: FocusEventHandler<HTMLElement>

Optional onCanPlay

onCanPlay?: ReactEventHandler<HTMLElement>

Optional onCanPlayCapture

onCanPlayCapture?: ReactEventHandler<HTMLElement>

Optional onCanPlayThrough

onCanPlayThrough?: ReactEventHandler<HTMLElement>

Optional onCanPlayThroughCapture

onCanPlayThroughCapture?: ReactEventHandler<HTMLElement>

Optional onChange

onChange?: FormEventHandler<HTMLElement>

Form Events

+

Optional onChangeCapture

onChangeCapture?: FormEventHandler<HTMLElement>

Optional onClick

onClick?: MouseEventHandler<HTMLElement>

Optional onClickCapture

onClickCapture?: MouseEventHandler<HTMLElement>

Optional onCompositionEnd

onCompositionEnd?: CompositionEventHandler<HTMLElement>

Composition Events

+

Optional onCompositionEndCapture

onCompositionEndCapture?: CompositionEventHandler<HTMLElement>

Optional onCompositionStart

onCompositionStart?: CompositionEventHandler<HTMLElement>

Optional onCompositionStartCapture

onCompositionStartCapture?: CompositionEventHandler<HTMLElement>

Optional onCompositionUpdate

onCompositionUpdate?: CompositionEventHandler<HTMLElement>

Optional onCompositionUpdateCapture

onCompositionUpdateCapture?: CompositionEventHandler<HTMLElement>

Optional onContextMenu

onContextMenu?: MouseEventHandler<HTMLElement>

Optional onContextMenuCapture

onContextMenuCapture?: MouseEventHandler<HTMLElement>

Optional onCopy

onCopy?: ClipboardEventHandler<HTMLElement>

Clipboard Events

+

Optional onCopyCapture

onCopyCapture?: ClipboardEventHandler<HTMLElement>

Optional onCut

onCut?: ClipboardEventHandler<HTMLElement>

Optional onCutCapture

onCutCapture?: ClipboardEventHandler<HTMLElement>

Optional onDoubleClick

onDoubleClick?: MouseEventHandler<HTMLElement>

Optional onDoubleClickCapture

onDoubleClickCapture?: MouseEventHandler<HTMLElement>

Optional onDrag

onDrag?: DragEventHandler<HTMLElement>

Optional onDragCapture

onDragCapture?: DragEventHandler<HTMLElement>

Optional onDragEnd

onDragEnd?: DragEventHandler<HTMLElement>

Optional onDragEndCapture

onDragEndCapture?: DragEventHandler<HTMLElement>

Optional onDragEnter

onDragEnter?: DragEventHandler<HTMLElement>

Optional onDragEnterCapture

onDragEnterCapture?: DragEventHandler<HTMLElement>

Optional onDragExit

onDragExit?: DragEventHandler<HTMLElement>

Optional onDragExitCapture

onDragExitCapture?: DragEventHandler<HTMLElement>

Optional onDragLeave

onDragLeave?: DragEventHandler<HTMLElement>

Optional onDragLeaveCapture

onDragLeaveCapture?: DragEventHandler<HTMLElement>

Optional onDragOver

onDragOver?: DragEventHandler<HTMLElement>

Optional onDragOverCapture

onDragOverCapture?: DragEventHandler<HTMLElement>

Optional onDragStart

onDragStart?: DragEventHandler<HTMLElement>

Optional onDragStartCapture

onDragStartCapture?: DragEventHandler<HTMLElement>

Optional onDrop

onDrop?: DragEventHandler<HTMLElement>

Optional onDropCapture

onDropCapture?: DragEventHandler<HTMLElement>

Optional onDurationChange

onDurationChange?: ReactEventHandler<HTMLElement>

Optional onDurationChangeCapture

onDurationChangeCapture?: ReactEventHandler<HTMLElement>

Optional onEmptied

onEmptied?: ReactEventHandler<HTMLElement>

Optional onEmptiedCapture

onEmptiedCapture?: ReactEventHandler<HTMLElement>

Optional onEncrypted

onEncrypted?: ReactEventHandler<HTMLElement>

Optional onEncryptedCapture

onEncryptedCapture?: ReactEventHandler<HTMLElement>

Optional onEnded

onEnded?: ReactEventHandler<HTMLElement>

Optional onEndedCapture

onEndedCapture?: ReactEventHandler<HTMLElement>

Optional onError

onError?: ReactEventHandler<HTMLElement>

Optional onErrorCapture

onErrorCapture?: ReactEventHandler<HTMLElement>

Optional onFocus

onFocus?: FocusEventHandler<HTMLElement>

Focus Events

+

Optional onFocusCapture

onFocusCapture?: FocusEventHandler<HTMLElement>

Optional onGotPointerCapture

onGotPointerCapture?: PointerEventHandler<HTMLElement>

Optional onGotPointerCaptureCapture

onGotPointerCaptureCapture?: PointerEventHandler<HTMLElement>

Optional onInput

onInput?: FormEventHandler<HTMLElement>

Optional onInputCapture

onInputCapture?: FormEventHandler<HTMLElement>

Optional onInvalid

onInvalid?: FormEventHandler<HTMLElement>

Optional onInvalidCapture

onInvalidCapture?: FormEventHandler<HTMLElement>

Optional onKeyDown

onKeyDown?: KeyboardEventHandler<HTMLElement>

Keyboard Events

+

Optional onKeyDownCapture

onKeyDownCapture?: KeyboardEventHandler<HTMLElement>

Optional onKeyPress

onKeyPress?: KeyboardEventHandler<HTMLElement>

Deprecated

Optional onKeyPressCapture

onKeyPressCapture?: KeyboardEventHandler<HTMLElement>

Deprecated

Optional onKeyUp

onKeyUp?: KeyboardEventHandler<HTMLElement>

Optional onKeyUpCapture

onKeyUpCapture?: KeyboardEventHandler<HTMLElement>

Optional onLoad

onLoad?: ReactEventHandler<HTMLElement>

Image Events

+

Optional onLoadCapture

onLoadCapture?: ReactEventHandler<HTMLElement>

Optional onLoadStart

onLoadStart?: ReactEventHandler<HTMLElement>

Optional onLoadStartCapture

onLoadStartCapture?: ReactEventHandler<HTMLElement>

Optional onLoadedData

onLoadedData?: ReactEventHandler<HTMLElement>

Optional onLoadedDataCapture

onLoadedDataCapture?: ReactEventHandler<HTMLElement>

Optional onLoadedMetadata

onLoadedMetadata?: ReactEventHandler<HTMLElement>

Optional onLoadedMetadataCapture

onLoadedMetadataCapture?: ReactEventHandler<HTMLElement>

Optional onLostPointerCapture

onLostPointerCapture?: PointerEventHandler<HTMLElement>

Optional onLostPointerCaptureCapture

onLostPointerCaptureCapture?: PointerEventHandler<HTMLElement>

Optional onMouseDown

onMouseDown?: MouseEventHandler<HTMLElement>

Optional onMouseDownCapture

onMouseDownCapture?: MouseEventHandler<HTMLElement>

Optional onMouseEnter

onMouseEnter?: MouseEventHandler<HTMLElement>

Optional onMouseLeave

onMouseLeave?: MouseEventHandler<HTMLElement>

Optional onMouseMove

onMouseMove?: MouseEventHandler<HTMLElement>

Optional onMouseMoveCapture

onMouseMoveCapture?: MouseEventHandler<HTMLElement>

Optional onMouseOut

onMouseOut?: MouseEventHandler<HTMLElement>

Optional onMouseOutCapture

onMouseOutCapture?: MouseEventHandler<HTMLElement>

Optional onMouseOver

onMouseOver?: MouseEventHandler<HTMLElement>

Optional onMouseOverCapture

onMouseOverCapture?: MouseEventHandler<HTMLElement>

Optional onMouseUp

onMouseUp?: MouseEventHandler<HTMLElement>

Optional onMouseUpCapture

onMouseUpCapture?: MouseEventHandler<HTMLElement>

Optional onPaste

onPaste?: ClipboardEventHandler<HTMLElement>

Optional onPasteCapture

onPasteCapture?: ClipboardEventHandler<HTMLElement>

Optional onPause

onPause?: ReactEventHandler<HTMLElement>

Optional onPauseCapture

onPauseCapture?: ReactEventHandler<HTMLElement>

Optional onPlay

onPlay?: ReactEventHandler<HTMLElement>

Optional onPlayCapture

onPlayCapture?: ReactEventHandler<HTMLElement>

Optional onPlaying

onPlaying?: ReactEventHandler<HTMLElement>

Optional onPlayingCapture

onPlayingCapture?: ReactEventHandler<HTMLElement>

Optional onPointerCancel

onPointerCancel?: PointerEventHandler<HTMLElement>

Optional onPointerCancelCapture

onPointerCancelCapture?: PointerEventHandler<HTMLElement>

Optional onPointerDown

onPointerDown?: PointerEventHandler<HTMLElement>

Pointer Events

+

Optional onPointerDownCapture

onPointerDownCapture?: PointerEventHandler<HTMLElement>

Optional onPointerEnter

onPointerEnter?: PointerEventHandler<HTMLElement>

Optional onPointerEnterCapture

onPointerEnterCapture?: PointerEventHandler<HTMLElement>

Optional onPointerLeave

onPointerLeave?: PointerEventHandler<HTMLElement>

Optional onPointerLeaveCapture

onPointerLeaveCapture?: PointerEventHandler<HTMLElement>

Optional onPointerMove

onPointerMove?: PointerEventHandler<HTMLElement>

Optional onPointerMoveCapture

onPointerMoveCapture?: PointerEventHandler<HTMLElement>

Optional onPointerOut

onPointerOut?: PointerEventHandler<HTMLElement>

Optional onPointerOutCapture

onPointerOutCapture?: PointerEventHandler<HTMLElement>

Optional onPointerOver

onPointerOver?: PointerEventHandler<HTMLElement>

Optional onPointerOverCapture

onPointerOverCapture?: PointerEventHandler<HTMLElement>

Optional onPointerUp

onPointerUp?: PointerEventHandler<HTMLElement>

Optional onPointerUpCapture

onPointerUpCapture?: PointerEventHandler<HTMLElement>

Optional onProgress

onProgress?: ReactEventHandler<HTMLElement>

Optional onProgressCapture

onProgressCapture?: ReactEventHandler<HTMLElement>

Optional onRateChange

onRateChange?: ReactEventHandler<HTMLElement>

Optional onRateChangeCapture

onRateChangeCapture?: ReactEventHandler<HTMLElement>

Optional onReset

onReset?: FormEventHandler<HTMLElement>

Optional onResetCapture

onResetCapture?: FormEventHandler<HTMLElement>

Optional onResize

onResize?: ReactEventHandler<HTMLElement>

Optional onResizeCapture

onResizeCapture?: ReactEventHandler<HTMLElement>

Optional onScroll

onScroll?: UIEventHandler<HTMLElement>

UI Events

+

Optional onScrollCapture

onScrollCapture?: UIEventHandler<HTMLElement>

Optional onSeeked

onSeeked?: ReactEventHandler<HTMLElement>

Optional onSeekedCapture

onSeekedCapture?: ReactEventHandler<HTMLElement>

Optional onSeeking

onSeeking?: ReactEventHandler<HTMLElement>

Optional onSeekingCapture

onSeekingCapture?: ReactEventHandler<HTMLElement>

Optional onSelect

onSelect?: ReactEventHandler<HTMLElement>

Selection Events

+

Optional onSelectCapture

onSelectCapture?: ReactEventHandler<HTMLElement>

Optional onStalled

onStalled?: ReactEventHandler<HTMLElement>

Optional onStalledCapture

onStalledCapture?: ReactEventHandler<HTMLElement>

Optional onSubmit

onSubmit?: FormEventHandler<HTMLElement>

Optional onSubmitCapture

onSubmitCapture?: FormEventHandler<HTMLElement>

Optional onSuspend

onSuspend?: ReactEventHandler<HTMLElement>

Optional onSuspendCapture

onSuspendCapture?: ReactEventHandler<HTMLElement>

Optional onTimeUpdate

onTimeUpdate?: ReactEventHandler<HTMLElement>

Optional onTimeUpdateCapture

onTimeUpdateCapture?: ReactEventHandler<HTMLElement>

Optional onTouchCancel

onTouchCancel?: TouchEventHandler<HTMLElement>

Touch Events

+

Optional onTouchCancelCapture

onTouchCancelCapture?: TouchEventHandler<HTMLElement>

Optional onTouchEnd

onTouchEnd?: TouchEventHandler<HTMLElement>

Optional onTouchEndCapture

onTouchEndCapture?: TouchEventHandler<HTMLElement>

Optional onTouchMove

onTouchMove?: TouchEventHandler<HTMLElement>

Optional onTouchMoveCapture

onTouchMoveCapture?: TouchEventHandler<HTMLElement>

Optional onTouchStart

onTouchStart?: TouchEventHandler<HTMLElement>

Optional onTouchStartCapture

onTouchStartCapture?: TouchEventHandler<HTMLElement>

Optional onTransitionEnd

onTransitionEnd?: TransitionEventHandler<HTMLElement>

Transition Events

+

Optional onTransitionEndCapture

onTransitionEndCapture?: TransitionEventHandler<HTMLElement>

Optional onVolumeChange

onVolumeChange?: ReactEventHandler<HTMLElement>

Optional onVolumeChangeCapture

onVolumeChangeCapture?: ReactEventHandler<HTMLElement>

Optional onWaiting

onWaiting?: ReactEventHandler<HTMLElement>

Optional onWaitingCapture

onWaitingCapture?: ReactEventHandler<HTMLElement>

Optional onWheel

onWheel?: WheelEventHandler<HTMLElement>

Wheel Events

+

Optional onWheelCapture

onWheelCapture?: WheelEventHandler<HTMLElement>

Optional open

open?: boolean

Optional optimum

optimum?: number

Optional pattern

pattern?: string

Optional placeholder

placeholder?: string

Optional playsInline

playsInline?: boolean

Optional poster

poster?: string

Optional prefix

prefix?: string

Optional preload

preload?: string

Optional property

property?: string

Optional radioGroup

radioGroup?: string

Unknown

+

Optional readOnly

readOnly?: boolean

Optional ref

ref?: LegacyRef<HTMLElement>

Allows getting a ref to the component instance. +Once the component unmounts, React will set ref.current to null (or call the ref with null if you passed a callback ref).

+

See

https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom

+

Optional rel

rel?: string

Optional required

required?: boolean

Optional resource

resource?: string

Optional results

results?: number

Optional rev

rev?: string

Optional reversed

reversed?: boolean

Optional role

role?: AriaRole

WAI-ARIA

+

Optional rowSpan

rowSpan?: number

Optional rows

rows?: number

Optional sandbox

sandbox?: string

Optional scope

scope?: string

Optional scoped

scoped?: boolean

Optional scrolling

scrolling?: string

Optional seamless

seamless?: boolean

Optional security

security?: string

Optional selected

selected?: boolean

Optional shape

shape?: string

Optional size

size?: number

Optional sizes

sizes?: string

Optional slot

slot?: string

Optional span

span?: number

Optional spellCheck

spellCheck?: Booleanish

Optional src

src?: string

Optional srcDoc

srcDoc?: string

Optional srcLang

srcLang?: string

Optional srcSet

srcSet?: string

Optional start

start?: number

Optional step

step?: string | number

Optional style

style?: CSSProperties

Optional summary

summary?: string

Optional suppressContentEditableWarning

suppressContentEditableWarning?: boolean

Optional suppressHydrationWarning

suppressHydrationWarning?: boolean

Optional tabIndex

tabIndex?: number

Optional tag

tag?: keyof IntrinsicElements

Default Value

'html'
+
+

Optional target

target?: string

Optional title

title?: string

Optional translate

translate?: "yes" | "no"

Optional type

type?: string

Optional typeof

typeof?: string

Optional unselectable

unselectable?: "on" | "off"

Optional useMap

useMap?: string

Optional value

value?: string | number | readonly string[]

Optional vocab

vocab?: string

Optional width

width?: string | number

Optional wmode

wmode?: string

Optional wrap

wrap?: string

Settings

Member Visibility

Theme

On This Page

Generated using TypeDoc

\ No newline at end of file diff --git a/docs/modules/client_color_switch_color_switch.html b/docs/modules/client_color_switch_color_switch.html new file mode 100644 index 00000000..1780e811 --- /dev/null +++ b/docs/modules/client_color_switch_color_switch.html @@ -0,0 +1,3 @@ +client/color-switch/color-switch | Code Documentation

Module client/color-switch/color-switch

Index

Interfaces

ColorSwitchProps +

Functions

ColorSwitch +

Settings

Member Visibility

Theme

Generated using TypeDoc

\ No newline at end of file diff --git a/docs/modules/client_force_color_scheme_force_color_scheme.html b/docs/modules/client_force_color_scheme_force_color_scheme.html new file mode 100644 index 00000000..4b5c9b6c --- /dev/null +++ b/docs/modules/client_force_color_scheme_force_color_scheme.html @@ -0,0 +1,2 @@ +client/force-color-scheme/force-color-scheme | Code Documentation

Module client/force-color-scheme/force-color-scheme

Index

Functions

ForceColorScheme +

Settings

Member Visibility

Theme

Generated using TypeDoc

\ No newline at end of file diff --git a/docs/modules/client_force_theme_force_theme.html b/docs/modules/client_force_theme_force_theme.html new file mode 100644 index 00000000..468eb5ad --- /dev/null +++ b/docs/modules/client_force_theme_force_theme.html @@ -0,0 +1,2 @@ +client/force-theme/force-theme | Code Documentation

Module client/force-theme/force-theme

Index

Functions

ForceTheme +

Settings

Member Visibility

Theme

Generated using TypeDoc

\ No newline at end of file diff --git a/docs/modules/client_theme_switcher_theme_switcher.html b/docs/modules/client_theme_switcher_theme_switcher.html new file mode 100644 index 00000000..e3043b5a --- /dev/null +++ b/docs/modules/client_theme_switcher_theme_switcher.html @@ -0,0 +1,4 @@ +client/theme-switcher/theme-switcher | Code Documentation

Module client/theme-switcher/theme-switcher

Index

Interfaces

ThemeSwitcherProps +

Functions

ThemeSwitcher +useThemeSwitcher +

Settings

Member Visibility

Theme

Generated using TypeDoc

\ No newline at end of file diff --git a/docs/modules/server_nextjs_server_side_wrapper_server_side_wrapper.html b/docs/modules/server_nextjs_server_side_wrapper_server_side_wrapper.html new file mode 100644 index 00000000..a81b53fb --- /dev/null +++ b/docs/modules/server_nextjs_server_side_wrapper_server_side_wrapper.html @@ -0,0 +1,7 @@ +server/nextjs/server-side-wrapper/server-side-wrapper | Code Documentation

Module server/nextjs/server-side-wrapper/server-side-wrapper

References

NextJsServerTarget +

Interfaces

NextJsSSRThemeSwitcherProps +ServerSideWrapperProps +

Type Aliases

ForcedPage +

Functions

NextJsSSGThemeSwitcher +ServerSideWrapper +

References

NextJsServerTarget

Renames and re-exports NextJsSSGThemeSwitcher

Settings

Member Visibility

Theme

On This Page

Generated using TypeDoc

\ No newline at end of file diff --git a/docs/modules/store.html b/docs/modules/store.html new file mode 100644 index 00000000..6f5d3447 --- /dev/null +++ b/docs/modules/store.html @@ -0,0 +1,6 @@ +store | Code Documentation

Module store

Index

Namespaces

useTheme +

Type Aliases

ColorSchemeType +ThemeStoreType +

Variables

initialState +

Functions

useTheme +

Settings

Member Visibility

Theme

Generated using TypeDoc

\ No newline at end of file diff --git a/docs/modules/store.useTheme.html b/docs/modules/store.useTheme.html new file mode 100644 index 00000000..7a6bf0e4 --- /dev/null +++ b/docs/modules/store.useTheme.html @@ -0,0 +1,5 @@ +useTheme | Code Documentation

Namespace useTheme

Index

Functions

destroy +getState +setState +subscribe +

Settings

Member Visibility

Theme

Generated using TypeDoc

\ No newline at end of file diff --git a/docs/modules/utils.html b/docs/modules/utils.html new file mode 100644 index 00000000..8482266d --- /dev/null +++ b/docs/modules/utils.html @@ -0,0 +1,2 @@ +utils | Code Documentation

Module utils

Index

Functions

resolveThemeFromColorScheme +

Settings

Member Visibility

Theme

Generated using TypeDoc

\ No newline at end of file diff --git a/docs/types/server_nextjs_server_side_wrapper_server_side_wrapper.ForcedPage.html b/docs/types/server_nextjs_server_side_wrapper_server_side_wrapper.ForcedPage.html new file mode 100644 index 00000000..f7496afe --- /dev/null +++ b/docs/types/server_nextjs_server_side_wrapper_server_side_wrapper.ForcedPage.html @@ -0,0 +1 @@ +ForcedPage | Code Documentation

Type alias ForcedPage

ForcedPage: [pathMatcher: RegExp | string, themes: {
    colorScheme?: ColorSchemeType;
    theme?: string;
}]

Settings

Member Visibility

Theme

Generated using TypeDoc

\ No newline at end of file diff --git a/docs/types/store.ColorSchemeType.html b/docs/types/store.ColorSchemeType.html new file mode 100644 index 00000000..97745d73 --- /dev/null +++ b/docs/types/store.ColorSchemeType.html @@ -0,0 +1 @@ +ColorSchemeType | Code Documentation

Type alias ColorSchemeType

ColorSchemeType: "" | "system" | "dark" | "light"

Settings

Member Visibility

Theme

Generated using TypeDoc

\ No newline at end of file diff --git a/docs/types/store.ThemeStoreType.html b/docs/types/store.ThemeStoreType.html new file mode 100644 index 00000000..e7c10b8d --- /dev/null +++ b/docs/types/store.ThemeStoreType.html @@ -0,0 +1 @@ +ThemeStoreType | Code Documentation

Type alias ThemeStoreType

ThemeStoreType: {
    colorSchemePref: ColorSchemeType;
    darkTheme: string;
    forcedColorScheme?: ColorSchemeType;
    forcedTheme?: string;
    lightTheme: string;
    theme: string;
}

Type declaration

  • colorSchemePref: ColorSchemeType
  • darkTheme: string
  • Optional forcedColorScheme?: ColorSchemeType
  • Optional forcedTheme?: string
  • lightTheme: string
  • theme: string

Settings

Member Visibility

Theme

Generated using TypeDoc

\ No newline at end of file diff --git a/docs/variables/store.initialState.html b/docs/variables/store.initialState.html new file mode 100644 index 00000000..5495c3fa --- /dev/null +++ b/docs/variables/store.initialState.html @@ -0,0 +1 @@ +initialState | Code Documentation

Variable initialStateConst

initialState: ThemeStoreType = ...

Settings

Member Visibility

Theme

Generated using TypeDoc

\ No newline at end of file diff --git a/package.json b/package.json index c310d9d0..e4f44766 100644 --- a/package.json +++ b/package.json @@ -5,6 +5,7 @@ "dev": "turbo run dev", "lint": "turbo run lint", "test": "turbo run test", + "doc": "turbo run doc", "format": "prettier --write \"**/*.{ts,tsx,md,mdx,css,scss}\"" }, "devDependencies": { diff --git a/packages/nextjs-themes/package.json b/packages/nextjs-themes/package.json index 089759cc..3da143e6 100644 --- a/packages/nextjs-themes/package.json +++ b/packages/nextjs-themes/package.json @@ -19,6 +19,7 @@ "scripts": { "test": "vitest run --coverage", "build": "tsup src && tsc --p tsconfig.build.json && node touchup.js", + "doc": "typedoc", "publish-package": "cd dist && npm publish --access public", "lint": "eslint . --quiet" }, @@ -37,19 +38,22 @@ "jsdom": "^23.0.1", "next": "^14.0.3", "octokit": "^3.1.2", - "persist-and-sync": "^1.1.0", "react": "^18.2.0", "tsconfig": "workspace:*", "tsup": "^8.0.1", + "typedoc": "^0.25.4", "typescript": "5.3.2", "vite-tsconfig-paths": "^4.2.1", - "vitest": "^0.34.6", + "vitest": "^0.34.6" + }, + "dependencies": { + "persist-and-sync": "^1.1.0", "zustand": "^4.4.7" }, "peerDependencies": { - "@types/react": "^16.8 || ^17 || ^18", - "next": "^8", - "react": "^16.8 || ^17 || ^18" + "@types/react": "16.8 - 18", + "next": "8 - 14", + "react": "16.8 - 18" }, "peerDependenciesMeta": { "next": { diff --git a/packages/nextjs-themes/tsconfig.doc.json b/packages/nextjs-themes/tsconfig.doc.json new file mode 100644 index 00000000..70249fd8 --- /dev/null +++ b/packages/nextjs-themes/tsconfig.doc.json @@ -0,0 +1,5 @@ +{ + "extends": "tsconfig/react-library.json", + "include": ["src"], + "exclude": ["**/*.test.tsx", "**/index.ts"] +} diff --git a/packages/nextjs-themes/typedoc.config.js b/packages/nextjs-themes/typedoc.config.js new file mode 100644 index 00000000..dec526f7 --- /dev/null +++ b/packages/nextjs-themes/typedoc.config.js @@ -0,0 +1,9 @@ +/** @type {import('typedoc').TypeDocOptions} */ +module.exports = { + name: "Code Documentation", + entryPoints: ["./src"], + entryPointStrategy: "Expand", + tsconfig: "./tsconfig.doc.json", + out: "../../docs", + commentStyle: "all", +}; diff --git a/turbo.json b/turbo.json index 0ffc24bf..6dbcaeed 100644 --- a/turbo.json +++ b/turbo.json @@ -11,6 +11,7 @@ }, "lint": {}, "test": {}, + "doc": {}, "dev": { "cache": false, "persistent": true From 4932e99f22df33d8baee13eecaa27b3404dca131 Mon Sep 17 00:00:00 2001 From: Mayank Kumar Chaudhari Date: Sat, 2 Dec 2023 20:47:43 +0530 Subject: [PATCH 8/9] update README --- README.md | 159 +++++++++++++++++++--------- packages/nextjs-themes/package.json | 7 +- 2 files changed, 113 insertions(+), 53 deletions(-) diff --git a/README.md b/README.md index bc8b15b4..8ae101b4 100644 --- a/README.md +++ b/README.md @@ -38,7 +38,7 @@ $ npm install nextjs-themes $ yarn add nextjs-themes ``` -## Want Lite Version? [![npm bundle size](https://img.shields.io/bundlephobia/minzip/nextjs-themes-lite)](https://www.npmjs.com/package/nextjs-themes-lite) +## Want Lite Version? [![npm bundle size](https://img.shields.io/bundlephobia/minzip/nextjs-themes-lite)](https://www.npmjs.com/package/nextjs-themes-lite) [![Version](https://img.shields.io/npm/v/nextjs-themes-lite.svg?colorB=green)](https://www.npmjs.com/package/nextjs-themes-lite) [![Downloads](https://img.jsdelivr.com/img.shields.io/npm/dt/nextjs-themes-lite.svg)](https://www.npmjs.com/package/nextjs-themes-lite) ```bash $ pnpm add nextjs-themes-lite @@ -50,24 +50,24 @@ $ yarn add nextjs-themes-lite > You need Zustand as a peer-dependency -## Use +## Usage -### With pages/ +### SPA (e.g., Vite, CRA) and Next.js pages directory (No server components) The best way is to add a [Custom `App`](https://nextjs.org/docs/advanced-features/custom-app) to use by modifying `_app` as follows: Adding dark mode support takes 2 lines of code: ```js -import { ThemeSwitcher } from "next-themes"; +import { ThemeSwitcher } from "nextjs-themes"; function MyApp({ Component, pageProps }) { - return ( - <> - - - - ); + return ( + <> + + + + ); } export default MyApp; @@ -77,25 +77,58 @@ export default MyApp; Check out examples for advanced usage. -### With app/ +### With Next.js `app` router (Server Components) -Update your `app/layout.jsx` to add `ThemeSwitcher` and `SSCWrapper` from `nextjs-themes`. `SSCWrapper` is required to avoid flash of un-themed content on reload. +#### Prefer static generation over SSR - No wrapper component -```js +> If your app is mostly serving static content, you do not want the overhead of SSR. Use `NextJsSSGThemeSwitcher` in this case. +> When using this approach, you need to use CSS general sibling Combinator (~) to make sure your themed CSS is properly applied. See (HTML & CSS)[#html--css]. + +Update your `app/layout.jsx` to add `ThemeSwitcher` from `nextjs-themes`, and `NextJsSSGThemeSwitcher` from `nextjs-themes/server`. `NextJsSSGThemeSwitcher` is required to avoid flash of un-themed content on reload. + +```tsx +// app/layout.jsx +import { ThemeSwitcher } from "nextjs-themes"; +import { NextJsSSGThemeSwitcher } from "nextjs-themes/server/nextjs"; + +export default function Layout({ children }) { + return ( + + + + /** use NextJsSSGThemeSwitcher as first element inside body */ + + + {children} + + + ); +} +``` + +Woohoo! You just added multiple theme modes and you can also use Server Component! Isn't that awesome! + +#### Prefer SSR over SSG - Use wrapper component + +> If your app is serving dynamic content and you want to utilize SSR, continue using `ServerSideWrapper` component to replace `html` tag in `layout.tsx` file. + +Update your `app/layout.jsx` to add `ThemeSwitcher` and `ServerSideWrapper` from `nextjs-themes`. `ServerSideWrapper` is required to avoid flash of un-themed content on reload. + +```tsx // app/layout.jsx -import { ThemeSwitcher } from "next-themes"; -import { SSCWrapper } from "next-themes/server/nextjs"; +import { ThemeSwitcher } from "nextjs-themes"; +import { ServerSideWrapper } from "nextjs-themes/server/nextjs"; export default function Layout({ children }) { - return ( - - - - - {children} - - - ); + return ( + + + + + {children} + + + ); } ``` @@ -103,18 +136,24 @@ Woohoo! You just added dark mode and you can also use Server Component! Isn't th ### HTML & CSS -That's it, your Next.js app fully supports dark mode, including System preference with `prefers-color-scheme`. The theme is also immediately synced between tabs. By default, next-themes modifies the `data-theme` attribute on the `html` element, which you can easily use to style your app: +That's it, your Next.js app fully supports dark mode, including System preference with `prefers-color-scheme`. The theme is also immediately synced between tabs. By default, nextjs-themes modifies the `data-theme` attribute on the `html` element, which you can easily use to style your app: ```css :root { - /* Your default theme */ - --background: white; - --foreground: black; + /* Your default theme */ + --background: white; + --foreground: black; } [data-theme="dark"] { - --background: black; - --foreground: white; + --background: black; + --foreground: white; +} + +// v2 onwards when using NextJsSSGThemeSwitcher, we need to use CSS Combinators +[data-theme="dark"] ~ * { + --background: black; + --foreground: white; } ``` @@ -126,18 +165,18 @@ In case your components need to know the current theme and be able to change it. import { useTheme } from "nextjs-themes"; const ThemeChanger = () => { - /* you can also improve performance by using selectors - * const [theme, setTheme] = useTheme(state => [state.theme, state.setTheme]); - */ - const { theme, setTheme } = useTheme(); - - return ( -
- The current theme is: {theme} - - -
- ); + /* you can also improve performance by using selectors + * const [theme, setTheme] = useTheme(state => [state.theme, state.setTheme]); + */ + const { theme, setTheme } = useTheme(); + + return ( +
+ The current theme is: {theme} + + +
+ ); }; ``` @@ -149,12 +188,12 @@ const ThemeChanger = () => { import { ForceTheme } from "nextjs-themes"; function MyPage() { - return ( - <> - - ... - - ); + return ( + <> + + ... + + ); } export default MyPage; @@ -166,7 +205,7 @@ For pages router, you have 2 options. One is the same as the app router and the ```javascript function MyPage() { - return <>...; + return <>...; } MyPage.theme = "my-theme"; @@ -178,6 +217,19 @@ In a similar way, you can also force color scheme. Forcing color scheme will apply your defaultDark or defaultLight theme, configurable via hooks. +## Migrating from v1 to v2 + +#### Motivation: + +For server side syncing, we need to use cookies and headers. This means that this component and its children can not be static. They will be rendered server side for each request. Thus, we are avoiding the wrapper. Now, only the `NextJsSSGThemeSwitcher` will be rendered server side for each request and rest of your app can be server statically. + +Take care of the following while migrating to `v2`. + +- No changes required for projects not using `Next.js` app router or server components other than updating cookies policy if needed. +- The persistent storage is realized with `cookies` in place of `localStorage`. (You might want to update cookies policy accordingly.) +- We have provided `NextJsSSGThemeSwitcher` in addition to `ServerSideWrapper` for `Next.js`. You no longer need to use a wrapper component which broke static generation and forced SSR. +- Visit [With Next.js `app` router (Server Components)](#with-nextjs-app-router-server-components) + ## Migrating from v0 to v1 - `defaultDarkTheme` is renamed to `darkTheme` @@ -185,7 +237,14 @@ Forcing color scheme will apply your defaultDark or defaultLight theme, configur - `defaultLightTheme` is renamed to `lightTheme` - `setDefaultLightTheme` is renamed to `setLightTheme` -> Full docs coming soon! +## Docs + +[Typedoc](https://react18-tools.github.io/nextjs-themes) + +### 🤩 Don't forger to start this repo! + +Want handson course for getting started with Turborepo? Check out [React and Next.js with TypeScript](https://www.udemy.com/course/react-and-next-js-with-typescript/?referralCode=7202184A1E57C3DCA8B2) + ## License diff --git a/packages/nextjs-themes/package.json b/packages/nextjs-themes/package.json index 3da143e6..97a9ad14 100644 --- a/packages/nextjs-themes/package.json +++ b/packages/nextjs-themes/package.json @@ -8,12 +8,12 @@ "types": "./index.ts", "repository": { "type": "git", - "url": "git+https://github.com/mayank1513/nextjs-themes.git" + "url": "git+https://github.com/react18-tools/nextjs-themes.git" }, "bugs": { - "url": "https://github.com/mayank1513/nextjs-themes/issues" + "url": "https://github.com/react18-tools/nextjs-themes/issues" }, - "homepage": "https://github.com/mayank1513/nextjs-themes#readme", + "homepage": "https://github.com/react18-tools/nextjs-themes#readme", "sideEffects": false, "license": "MIT", "scripts": { @@ -71,6 +71,7 @@ "nextjs13-themes", "react", "react18", + "react18-tools", "react-themes", "react18-themes", "react-server-components", From 07326589c14941aec6a4d83714169ed88da8f972 Mon Sep 17 00:00:00 2001 From: Mayank Kumar Chaudhari Date: Sat, 2 Dec 2023 20:54:12 +0530 Subject: [PATCH 9/9] update docs --- README.md | 4 ++ ...color_switch_color_switch.ColorSwitch.html | 2 +- ...e_force_color_scheme.ForceColorScheme.html | 2 +- ...nt_force_theme_force_theme.ForceTheme.html | 2 +- ...switcher_theme_switcher.ThemeSwitcher.html | 2 +- ...tcher_theme_switcher.useThemeSwitcher.html | 2 +- ...r_side_wrapper.NextJsSSGThemeSwitcher.html | 4 +- ...server_side_wrapper.ServerSideWrapper.html | 4 +- .../utils.resolveThemeFromColorScheme.html | 2 +- docs/index.html | 49 +++++++++++++------ ..._switch_color_switch.ColorSwitchProps.html | 4 +- ...her_theme_switcher.ThemeSwitcherProps.html | 4 +- ...e_wrapper.NextJsSSRThemeSwitcherProps.html | 8 +-- ...r_side_wrapper.ServerSideWrapperProps.html | 8 +-- .../client_color_switch_color_switch.html | 2 +- ...force_color_scheme_force_color_scheme.html | 2 +- .../client_force_theme_force_theme.html | 2 +- .../client_theme_switcher_theme_switcher.html | 2 +- ...rver_side_wrapper_server_side_wrapper.html | 2 +- docs/modules/store.html | 2 +- docs/modules/store.useTheme.html | 2 +- docs/modules/utils.html | 2 +- ...rapper_server_side_wrapper.ForcedPage.html | 2 +- docs/types/store.ColorSchemeType.html | 2 +- docs/types/store.ThemeStoreType.html | 2 +- docs/variables/store.initialState.html | 2 +- .../server-side-wrapper.tsx | 16 ++++++ 27 files changed, 91 insertions(+), 46 deletions(-) diff --git a/README.md b/README.md index 8ae101b4..d617c248 100644 --- a/README.md +++ b/README.md @@ -50,6 +50,10 @@ $ yarn add nextjs-themes-lite > You need Zustand as a peer-dependency +## To do + +- [ ] Update examples + ## Usage ### SPA (e.g., Vite, CRA) and Next.js pages directory (No server components) diff --git a/docs/functions/client_color_switch_color_switch.ColorSwitch.html b/docs/functions/client_color_switch_color_switch.ColorSwitch.html index 34eb136a..10e9fc99 100644 --- a/docs/functions/client_color_switch_color_switch.ColorSwitch.html +++ b/docs/functions/client_color_switch_color_switch.ColorSwitch.html @@ -4,4 +4,4 @@

custom size

<ColorSwitch size={20} />
-

Settings

Member Visibility

Theme

Generated using TypeDoc

\ No newline at end of file +

Settings

Member Visibility

Theme

Generated using TypeDoc

\ No newline at end of file diff --git a/docs/functions/client_force_color_scheme_force_color_scheme.ForceColorScheme.html b/docs/functions/client_force_color_scheme_force_color_scheme.ForceColorScheme.html index 063c9eb4..9f08c216 100644 --- a/docs/functions/client_force_color_scheme_force_color_scheme.ForceColorScheme.html +++ b/docs/functions/client_force_color_scheme_force_color_scheme.ForceColorScheme.html @@ -1 +1 @@ -ForceColorScheme | Code Documentation

Function ForceColorScheme

Settings

Member Visibility

Theme

Generated using TypeDoc

\ No newline at end of file +ForceColorScheme | Code Documentation

Function ForceColorScheme

Settings

Member Visibility

Theme

Generated using TypeDoc

\ No newline at end of file diff --git a/docs/functions/client_force_theme_force_theme.ForceTheme.html b/docs/functions/client_force_theme_force_theme.ForceTheme.html index 23fdf4fa..496e4de8 100644 --- a/docs/functions/client_force_theme_force_theme.ForceTheme.html +++ b/docs/functions/client_force_theme_force_theme.ForceTheme.html @@ -1 +1 @@ -ForceTheme | Code Documentation

Function ForceTheme

Settings

Member Visibility

Theme

Generated using TypeDoc

\ No newline at end of file +ForceTheme | Code Documentation

Function ForceTheme

Settings

Member Visibility

Theme

Generated using TypeDoc

\ No newline at end of file diff --git a/docs/functions/client_theme_switcher_theme_switcher.ThemeSwitcher.html b/docs/functions/client_theme_switcher_theme_switcher.ThemeSwitcher.html index 68a93653..9a353325 100644 --- a/docs/functions/client_theme_switcher_theme_switcher.ThemeSwitcher.html +++ b/docs/functions/client_theme_switcher_theme_switcher.ThemeSwitcher.html @@ -1 +1 @@ -ThemeSwitcher | Code Documentation

Function ThemeSwitcher

Settings

Member Visibility

Theme

Generated using TypeDoc

\ No newline at end of file +ThemeSwitcher | Code Documentation

Function ThemeSwitcher

Settings

Member Visibility

Theme

Generated using TypeDoc

\ No newline at end of file diff --git a/docs/functions/client_theme_switcher_theme_switcher.useThemeSwitcher.html b/docs/functions/client_theme_switcher_theme_switcher.useThemeSwitcher.html index 0d9ac2a0..322cb8f3 100644 --- a/docs/functions/client_theme_switcher_theme_switcher.useThemeSwitcher.html +++ b/docs/functions/client_theme_switcher_theme_switcher.useThemeSwitcher.html @@ -1 +1 @@ -useThemeSwitcher | Code Documentation

Function useThemeSwitcher

Settings

Member Visibility

Theme

Generated using TypeDoc

\ No newline at end of file +useThemeSwitcher | Code Documentation

Function useThemeSwitcher

Settings

Member Visibility

Theme

Generated using TypeDoc

\ No newline at end of file diff --git a/docs/functions/server_nextjs_server_side_wrapper_server_side_wrapper.NextJsSSGThemeSwitcher.html b/docs/functions/server_nextjs_server_side_wrapper_server_side_wrapper.NextJsSSGThemeSwitcher.html index 781e9ff5..11b96e8e 100644 --- a/docs/functions/server_nextjs_server_side_wrapper_server_side_wrapper.NextJsSSGThemeSwitcher.html +++ b/docs/functions/server_nextjs_server_side_wrapper_server_side_wrapper.NextJsSSGThemeSwitcher.html @@ -1 +1,3 @@ -NextJsSSGThemeSwitcher | Code Documentation

Function NextJsSSGThemeSwitcher

Settings

Member Visibility

Theme

Generated using TypeDoc

\ No newline at end of file +NextJsSSGThemeSwitcher | Code Documentation

Function NextJsSSGThemeSwitcher

Settings

Member Visibility

Theme

Generated using TypeDoc

\ No newline at end of file diff --git a/docs/functions/server_nextjs_server_side_wrapper_server_side_wrapper.ServerSideWrapper.html b/docs/functions/server_nextjs_server_side_wrapper_server_side_wrapper.ServerSideWrapper.html index fdf1f49e..3b5adfbc 100644 --- a/docs/functions/server_nextjs_server_side_wrapper_server_side_wrapper.ServerSideWrapper.html +++ b/docs/functions/server_nextjs_server_side_wrapper_server_side_wrapper.ServerSideWrapper.html @@ -1,2 +1,4 @@ ServerSideWrapper | Code Documentation

Function ServerSideWrapper

Settings

Member Visibility

Theme

Generated using TypeDoc

\ No newline at end of file +

Parameters

Returns Element

Example

<ServerSideWrapperProps lang="en">
 <body>
   <ThemeSwitcher />
   {children}
 </body>
</ServerSideWrapperProps>
+
+

Settings

Member Visibility

Theme

Generated using TypeDoc

\ No newline at end of file diff --git a/docs/functions/utils.resolveThemeFromColorScheme.html b/docs/functions/utils.resolveThemeFromColorScheme.html index 82a63b87..833d8ad7 100644 --- a/docs/functions/utils.resolveThemeFromColorScheme.html +++ b/docs/functions/utils.resolveThemeFromColorScheme.html @@ -1 +1 @@ -resolveThemeFromColorScheme | Code Documentation

Function resolveThemeFromColorScheme

Settings

Member Visibility

Theme

Generated using TypeDoc

\ No newline at end of file +resolveThemeFromColorScheme | Code Documentation

Function resolveThemeFromColorScheme

Settings

Member Visibility

Theme

Generated using TypeDoc

\ No newline at end of file diff --git a/docs/index.html b/docs/index.html index 95a39243..4d8e1b1b 100644 --- a/docs/index.html +++ b/docs/index.html @@ -27,47 +27,68 @@

Check out the live example.

Install

$ pnpm add nextjs-themes
# or
$ npm install nextjs-themes
# or
$ yarn add nextjs-themes
-

Want Lite Version? npm bundle size

$ pnpm add nextjs-themes-lite
# or
$ npm install nextjs-themes-lite
# or
$ yarn add nextjs-themes-lite
+
Want Lite Version? npm bundle size Version Downloads
$ pnpm add nextjs-themes-lite
# or
$ npm install nextjs-themes-lite
# or
$ yarn add nextjs-themes-lite
 

 

 
You need Zustand as a peer-dependency

 

-
Use
With pages/
The best way is to add a Custom App to use by modifying _app as follows:

+
To do
    
+
  •  Update examples
    • 
+

+
Usage
SPA (e.g., Vite, CRA) and Next.js pages directory (No server components)
The best way is to add a Custom App to use by modifying _app as follows:

 
Adding dark mode support takes 2 lines of code:

-
import { ThemeSwitcher } from "next-themes";

function MyApp({ Component, pageProps }) {
  return (
    <>
      <ThemeSwitcher forcedTheme={Component.theme} />
      <Component {...pageProps} />
    </>
  );
}

export default MyApp;
+
import { ThemeSwitcher } from "nextjs-themes";

function MyApp({ Component, pageProps }) {
    return (
        <>
            <ThemeSwitcher forcedTheme={Component.theme} />
            <Component {...pageProps} />
        </>
    );
}

export default MyApp;
 

 
⚡🎉Boom! Just a couple of lines and your dark mode is ready!

 
Check out examples for advanced usage.

-
With app/
Update your app/layout.jsx to add ThemeSwitcher and SSCWrapper from nextjs-themes. SSCWrapper is required to avoid flash of un-themed content on reload.

-
// app/layout.jsx
import { ThemeSwitcher } from "next-themes";
import { SSCWrapper } from "next-themes/server/nextjs";

export default function Layout({ children }) {
  return (
    <SSCWrapper tag="html" lang="en">
      <head />
      <body>
        <ThemeSwitcher />
        {children}
      </body>
    </SSCWrapper>
  );
}
+
With Next.js app router (Server Components)
Prefer static generation over SSR - No wrapper component

+
If your app is mostly serving static content, you do not want the overhead of SSR. Use NextJsSSGThemeSwitcher in this case.
+When using this approach, you need to use CSS general sibling Combinator (~) to make sure your themed CSS is properly applied. See (HTML & CSS)[#html--css].

+

+
Update your app/layout.jsx to add ThemeSwitcher from nextjs-themes, and NextJsSSGThemeSwitcher from nextjs-themes/server. NextJsSSGThemeSwitcher is required to avoid flash of un-themed content on reload.

+
// app/layout.jsx
import { ThemeSwitcher } from "nextjs-themes";
import { NextJsSSGThemeSwitcher } from "nextjs-themes/server/nextjs";

export default function Layout({ children }) {
    return (
        <html lang="en">
            <head />
            <body>
                /** use NextJsSSGThemeSwitcher as first element inside body */
                <NextJsSSGThemeSwitcher />
                <ThemeSwitcher />
                {children}
            </body>
        </html>
    );
}
+

+
Woohoo! You just added multiple theme modes and you can also use Server Component! Isn't that awesome!

+
Prefer SSR over SSG - Use wrapper component

+
If your app is serving dynamic content and you want to utilize SSR, continue using ServerSideWrapper component to replace html tag in layout.tsx file.

+

+
Update your app/layout.jsx to add ThemeSwitcher and ServerSideWrapper from nextjs-themes. ServerSideWrapper is required to avoid flash of un-themed content on reload.

+
// app/layout.jsx
import { ThemeSwitcher } from "nextjs-themes";
import { ServerSideWrapper } from "nextjs-themes/server/nextjs";

export default function Layout({ children }) {
    return (
        <ServerSideWrapper tag="html" lang="en">
            <head />
            <body>
                <ThemeSwitcher />
                {children}
            </body>
        </ServerSideWrapper>
    );
}
 

 
Woohoo! You just added dark mode and you can also use Server Component! Isn't that awesome!

-
HTML & CSS
That's it, your Next.js app fully supports dark mode, including System preference with prefers-color-scheme. The theme is also immediately synced between tabs. By default, next-themes modifies the data-theme attribute on the html element, which you can easily use to style your app:

-
:root {
  /* Your default theme */
  --background: white;
  --foreground: black;
}

[data-theme="dark"] {
  --background: black;
  --foreground: white;
}
+
HTML & CSS
That's it, your Next.js app fully supports dark mode, including System preference with prefers-color-scheme. The theme is also immediately synced between tabs. By default, nextjs-themes modifies the data-theme attribute on the html element, which you can easily use to style your app:

+
:root {
    /* Your default theme */
    --background: white;
    --foreground: black;
}

[data-theme="dark"] {
    --background: black;
    --foreground: white;
}

// v2 onwards when using NextJsSSGThemeSwitcher, we need to use CSS Combinators
[data-theme="dark"] ~ * {
    --background: black;
    --foreground: white;
}
 

 
useTheme
In case your components need to know the current theme and be able to change it. The useTheme hook provides theme information:

-
import { useTheme } from "nextjs-themes";

const ThemeChanger = () => {
  /* you can also improve performance by using selectors
   * const [theme, setTheme] = useTheme(state => [state.theme, state.setTheme]);
   */
  const { theme, setTheme } = useTheme();

  return (
    <div>
      The current theme is: {theme}
      <button onClick={() => setTheme("light")}>Light Mode</button>
      <button onClick={() => setTheme("dark")}>Dark Mode</button>
    </div>
  );
};
+
import { useTheme } from "nextjs-themes";

const ThemeChanger = () => {
    /* you can also improve performance by using selectors
     * const [theme, setTheme] = useTheme(state => [state.theme, state.setTheme]);
     */
    const { theme, setTheme } = useTheme();

    return (
        <div>
            The current theme is: {theme}
            <button onClick={() => setTheme("light")}>Light Mode</button>
            <button onClick={() => setTheme("dark")}>Dark Mode</button>
        </div>
    );
};
 

-
Force per page theme and color-scheme
Next.js app router
import { ForceTheme } from "nextjs-themes";

function MyPage() {
  return (
    <>
      <ForceTheme theme={"my-theme"} />
      ...
    </>
  );
}

export default MyPage;
+
Force per page theme and color-scheme
Next.js app router
import { ForceTheme } from "nextjs-themes";

function MyPage() {
    return (
        <>
            <ForceTheme theme={"my-theme"} />
            ...
        </>
    );
}

export default MyPage;
 

 
Next.js pages router
For pages router, you have 2 options. One is the same as the app router and the other option which is compatible with next-themes is to add theme to your page component as follows.

-
function MyPage() {
  return <>...</>;
}

MyPage.theme = "my-theme";

export default MyPage;
+
function MyPage() {
    return <>...</>;
}

MyPage.theme = "my-theme";

export default MyPage;
 

 
In a similar way, you can also force color scheme.

 
Forcing color scheme will apply your defaultDark or defaultLight theme, configurable via hooks.

+
Migrating from v1 to v2
Motivation:
For server side syncing, we need to use cookies and headers. This means that this component and its children can not be static. They will be rendered server side for each request. Thus, we are avoiding the wrapper. Now, only the NextJsSSGThemeSwitcher will be rendered server side for each request and rest of your app can be server statically.

+
Take care of the following while migrating to v2.

+
    
+
  • No changes required for projects not using Next.js app router or server components other than updating cookies policy if needed.
    • 
+
  • The persistent storage is realized with cookies in place of localStorage. (You might want to update cookies policy accordingly.)
    • 
+
  • We have provided NextJsSSGThemeSwitcher in addition to ServerSideWrapper for Next.js. You no longer need to use a wrapper component which broke static generation and forced SSR.
    • 
+
  • Visit With Next.js app router (Server Components)
    • 
+

 
Migrating from v0 to v1
    
 
  • defaultDarkTheme is renamed to darkTheme
    • 
 
  • setDefaultDarkTheme is renamed to setDarkTheme
    • 
 
  • defaultLightTheme is renamed to lightTheme
    • 
 
  • setDefaultLightTheme is renamed to setLightTheme
    • 
 

-

-
Full docs coming soon!

-

+
Docs
Typedoc

+
🤩 Don't forger to start this repo!
Want handson course for getting started with Turborepo? Check out React and Next.js with TypeScript

 
License
Licensed as MIT open source.

 

 
Note: This package uses cookies to sync theme with server components

 

 

 
-
with 💖 by Mayank Kumar Chaudhari
Settings
Member Visibility
Theme
On This Page
Generated using TypeDoc

\ No newline at end of file
+
with 💖 by Mayank Kumar Chaudhari
Settings
Member Visibility
Theme
On This Page
Generated using TypeDoc

\ No newline at end of file
diff --git a/docs/interfaces/client_color_switch_color_switch.ColorSwitchProps.html b/docs/interfaces/client_color_switch_color_switch.ColorSwitchProps.html
index ba805dc7..ded1117a 100644
--- a/docs/interfaces/client_color_switch_color_switch.ColorSwitchProps.html
+++ b/docs/interfaces/client_color_switch_color_switch.ColorSwitchProps.html
@@ -1,3 +1,3 @@
-ColorSwitchProps | Code Documentation
Interface ColorSwitchProps
interface ColorSwitchProps { 
    size?: number; 
}
Properties
size?
+ColorSwitchProps | Code Documentation
Interface ColorSwitchProps
interface ColorSwitchProps { 
    size?: number; 
}
Properties
size?
 
Properties
Optional size
size?: number
Diameter of the color color switch

-
Settings
Member Visibility
Theme
On This Page
Generated using TypeDoc

\ No newline at end of file
+
Settings
Member Visibility
Theme
On This Page
Generated using TypeDoc

\ No newline at end of file
diff --git a/docs/interfaces/client_theme_switcher_theme_switcher.ThemeSwitcherProps.html b/docs/interfaces/client_theme_switcher_theme_switcher.ThemeSwitcherProps.html
index f8b44054..a369208e 100644
--- a/docs/interfaces/client_theme_switcher_theme_switcher.ThemeSwitcherProps.html
+++ b/docs/interfaces/client_theme_switcher_theme_switcher.ThemeSwitcherProps.html
@@ -1,4 +1,4 @@
-ThemeSwitcherProps | Code Documentation
Interface ThemeSwitcherProps
interface ThemeSwitcherProps { 
    forcedColorScheme?: ColorSchemeType; 
    forcedTheme?: string; 
    targetSelector?: string; 
}
Properties
forcedColorScheme?
+ThemeSwitcherProps | Code Documentation
Interface ThemeSwitcherProps
interface ThemeSwitcherProps { 
    forcedColorScheme?: ColorSchemeType; 
    forcedTheme?: string; 
    targetSelector?: string; 
}
Properties
forcedColorScheme?
 forcedTheme?
 targetSelector?
-
Properties
Optional forcedColorScheme
forcedColorScheme?: ColorSchemeType
Optional forcedTheme
forcedTheme?: string
Optional targetSelector
targetSelector?: string
Settings
Member Visibility
Theme
On This Page
Generated using TypeDoc

\ No newline at end of file
+
Properties
Optional forcedColorScheme
forcedColorScheme?: ColorSchemeType
Optional forcedTheme
forcedTheme?: string
Optional targetSelector
targetSelector?: string
Settings
Member Visibility
Theme
On This Page
Generated using TypeDoc

\ No newline at end of file
diff --git a/docs/interfaces/server_nextjs_server_side_wrapper_server_side_wrapper.NextJsSSRThemeSwitcherProps.html b/docs/interfaces/server_nextjs_server_side_wrapper_server_side_wrapper.NextJsSSRThemeSwitcherProps.html
index 75903e2a..45e22346 100644
--- a/docs/interfaces/server_nextjs_server_side_wrapper_server_side_wrapper.NextJsSSRThemeSwitcherProps.html
+++ b/docs/interfaces/server_nextjs_server_side_wrapper_server_side_wrapper.NextJsSSRThemeSwitcherProps.html
@@ -1,4 +1,4 @@
-NextJsSSRThemeSwitcherProps | Code Documentation
Interface NextJsSSRThemeSwitcherProps
interface NextJsSSRThemeSwitcherProps { 
    about?: string; 
    accept?: string; 
    acceptCharset?: string; 
    accessKey?: string; 
    action?: string | ((formData) => void); 
    allowFullScreen?: boolean; 
    allowTransparency?: boolean; 
    alt?: string; 
    aria-activedescendant?: string; 
    aria-atomic?: Booleanish; 
    aria-autocomplete?: "list" | "none" | "inline" | "both"; 
    aria-braillelabel?: string; 
    aria-brailleroledescription?: string; 
    aria-busy?: Booleanish; 
    aria-checked?: boolean | "true" | "false" | "mixed"; 
    aria-colcount?: number; 
    aria-colindex?: number; 
    aria-colindextext?: string; 
    aria-colspan?: number; 
    aria-controls?: string; 
    aria-current?: boolean | "time" | "page" | "step" | "true" | "false" | "date" | "location"; 
    aria-describedby?: string; 
    aria-description?: string; 
    aria-details?: string; 
    aria-disabled?: Booleanish; 
    aria-dropeffect?: "link" | "none" | "copy" | "execute" | "move" | "popup"; 
    aria-errormessage?: string; 
    aria-expanded?: Booleanish; 
    aria-flowto?: string; 
    aria-grabbed?: Booleanish; 
    aria-haspopup?: boolean | "dialog" | "menu" | "grid" | "listbox" | "tree" | "true" | "false"; 
    aria-hidden?: Booleanish; 
    aria-invalid?: boolean | "true" | "false" | "grammar" | "spelling"; 
    aria-keyshortcuts?: string; 
    aria-label?: string; 
    aria-labelledby?: string; 
    aria-level?: number; 
    aria-live?: "off" | "assertive" | "polite"; 
    aria-modal?: Booleanish; 
    aria-multiline?: Booleanish; 
    aria-multiselectable?: Booleanish; 
    aria-orientation?: "horizontal" | "vertical"; 
    aria-owns?: string; 
    aria-placeholder?: string; 
    aria-posinset?: number; 
    aria-pressed?: boolean | "true" | "false" | "mixed"; 
    aria-readonly?: Booleanish; 
    aria-relevant?: "text" | "all" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals"; 
    aria-required?: Booleanish; 
    aria-roledescription?: string; 
    aria-rowcount?: number; 
    aria-rowindex?: number; 
    aria-rowindextext?: string; 
    aria-rowspan?: number; 
    aria-selected?: Booleanish; 
    aria-setsize?: number; 
    aria-sort?: "none" | "ascending" | "descending" | "other"; 
    aria-valuemax?: number; 
    aria-valuemin?: number; 
    aria-valuenow?: number; 
    aria-valuetext?: string; 
    as?: string; 
    async?: boolean; 
    autoCapitalize?: string; 
    autoComplete?: string; 
    autoCorrect?: string; 
    autoFocus?: boolean; 
    autoPlay?: boolean; 
    autoSave?: string; 
    capture?: boolean | "user" | "environment"; 
    cellPadding?: string | number; 
    cellSpacing?: string | number; 
    challenge?: string; 
    charSet?: string; 
    checked?: boolean; 
    children?: ReactNode; 
    cite?: string; 
    classID?: string; 
    className?: string; 
    colSpan?: number; 
    color?: string; 
    cols?: number; 
    content?: string; 
    contentEditable?: Booleanish | "inherit" | "plaintext-only"; 
    contextMenu?: string; 
    controls?: boolean; 
    coords?: string; 
    crossOrigin?: CrossOrigin; 
    dangerouslySetInnerHTML?: { 
        __html: string | TrustedHTML; 
    }; 
    data?: string; 
    datatype?: string; 
    dateTime?: string; 
    default?: boolean; 
    defaultChecked?: boolean; 
    defaultValue?: string | number | readonly string[]; 
    defer?: boolean; 
    dir?: string; 
    disabled?: boolean; 
    download?: any; 
    draggable?: Booleanish; 
    encType?: string; 
    forcedPages?: ForcedPage[]; 
    form?: string; 
    formAction?: string | ((formData) => void); 
    formEncType?: string; 
    formMethod?: string; 
    formNoValidate?: boolean; 
    formTarget?: string; 
    frameBorder?: string | number; 
    headers?: string; 
    height?: string | number; 
    hidden?: boolean; 
    high?: number; 
    href?: string; 
    hrefLang?: string; 
    htmlFor?: string; 
    httpEquiv?: string; 
    id?: string; 
    inlist?: any; 
    inputMode?: "search" | "text" | "none" | "tel" | "url" | "email" | "numeric" | "decimal"; 
    integrity?: string; 
    is?: string; 
    itemID?: string; 
    itemProp?: string; 
    itemRef?: string; 
    itemScope?: boolean; 
    itemType?: string; 
    key?: null | Key; 
    keyParams?: string; 
    keyType?: string; 
    kind?: string; 
    label?: string; 
    lang?: string; 
    list?: string; 
    loop?: boolean; 
    low?: number; 
    manifest?: string; 
    marginHeight?: number; 
    marginWidth?: number; 
    max?: string | number; 
    maxLength?: number; 
    media?: string; 
    mediaGroup?: string; 
    method?: string; 
    min?: string | number; 
    minLength?: number; 
    multiple?: boolean; 
    muted?: boolean; 
    name?: string; 
    noValidate?: boolean; 
    nonce?: string; 
    onAbort?: ReactEventHandler<HTMLElement>; 
    onAbortCapture?: ReactEventHandler<HTMLElement>; 
    onAnimationEnd?: AnimationEventHandler<HTMLElement>; 
    onAnimationEndCapture?: AnimationEventHandler<HTMLElement>; 
    onAnimationIteration?: AnimationEventHandler<HTMLElement>; 
    onAnimationIterationCapture?: AnimationEventHandler<HTMLElement>; 
    onAnimationStart?: AnimationEventHandler<HTMLElement>; 
    onAnimationStartCapture?: AnimationEventHandler<HTMLElement>; 
    onAuxClick?: MouseEventHandler<HTMLElement>; 
    onAuxClickCapture?: MouseEventHandler<HTMLElement>; 
    onBeforeInput?: FormEventHandler<HTMLElement>; 
    onBeforeInputCapture?: FormEventHandler<HTMLElement>; 
    onBlur?: FocusEventHandler<HTMLElement>; 
    onBlurCapture?: FocusEventHandler<HTMLElement>; 
    onCanPlay?: ReactEventHandler<HTMLElement>; 
    onCanPlayCapture?: ReactEventHandler<HTMLElement>; 
    onCanPlayThrough?: ReactEventHandler<HTMLElement>; 
    onCanPlayThroughCapture?: ReactEventHandler<HTMLElement>; 
    onChange?: FormEventHandler<HTMLElement>; 
    onChangeCapture?: FormEventHandler<HTMLElement>; 
    onClick?: MouseEventHandler<HTMLElement>; 
    onClickCapture?: MouseEventHandler<HTMLElement>; 
    onCompositionEnd?: CompositionEventHandler<HTMLElement>; 
    onCompositionEndCapture?: CompositionEventHandler<HTMLElement>; 
    onCompositionStart?: CompositionEventHandler<HTMLElement>; 
    onCompositionStartCapture?: CompositionEventHandler<HTMLElement>; 
    onCompositionUpdate?: CompositionEventHandler<HTMLElement>; 
    onCompositionUpdateCapture?: CompositionEventHandler<HTMLElement>; 
    onContextMenu?: MouseEventHandler<HTMLElement>; 
    onContextMenuCapture?: MouseEventHandler<HTMLElement>; 
    onCopy?: ClipboardEventHandler<HTMLElement>; 
    onCopyCapture?: ClipboardEventHandler<HTMLElement>; 
    onCut?: ClipboardEventHandler<HTMLElement>; 
    onCutCapture?: ClipboardEventHandler<HTMLElement>; 
    onDoubleClick?: MouseEventHandler<HTMLElement>; 
    onDoubleClickCapture?: MouseEventHandler<HTMLElement>; 
    onDrag?: DragEventHandler<HTMLElement>; 
    onDragCapture?: DragEventHandler<HTMLElement>; 
    onDragEnd?: DragEventHandler<HTMLElement>; 
    onDragEndCapture?: DragEventHandler<HTMLElement>; 
    onDragEnter?: DragEventHandler<HTMLElement>; 
    onDragEnterCapture?: DragEventHandler<HTMLElement>; 
    onDragExit?: DragEventHandler<HTMLElement>; 
    onDragExitCapture?: DragEventHandler<HTMLElement>; 
    onDragLeave?: DragEventHandler<HTMLElement>; 
    onDragLeaveCapture?: DragEventHandler<HTMLElement>; 
    onDragOver?: DragEventHandler<HTMLElement>; 
    onDragOverCapture?: DragEventHandler<HTMLElement>; 
    onDragStart?: DragEventHandler<HTMLElement>; 
    onDragStartCapture?: DragEventHandler<HTMLElement>; 
    onDrop?: DragEventHandler<HTMLElement>; 
    onDropCapture?: DragEventHandler<HTMLElement>; 
    onDurationChange?: ReactEventHandler<HTMLElement>; 
    onDurationChangeCapture?: ReactEventHandler<HTMLElement>; 
    onEmptied?: ReactEventHandler<HTMLElement>; 
    onEmptiedCapture?: ReactEventHandler<HTMLElement>; 
    onEncrypted?: ReactEventHandler<HTMLElement>; 
    onEncryptedCapture?: ReactEventHandler<HTMLElement>; 
    onEnded?: ReactEventHandler<HTMLElement>; 
    onEndedCapture?: ReactEventHandler<HTMLElement>; 
    onError?: ReactEventHandler<HTMLElement>; 
    onErrorCapture?: ReactEventHandler<HTMLElement>; 
    onFocus?: FocusEventHandler<HTMLElement>; 
    onFocusCapture?: FocusEventHandler<HTMLElement>; 
    onGotPointerCapture?: PointerEventHandler<HTMLElement>; 
    onGotPointerCaptureCapture?: PointerEventHandler<HTMLElement>; 
    onInput?: FormEventHandler<HTMLElement>; 
    onInputCapture?: FormEventHandler<HTMLElement>; 
    onInvalid?: FormEventHandler<HTMLElement>; 
    onInvalidCapture?: FormEventHandler<HTMLElement>; 
    onKeyDown?: KeyboardEventHandler<HTMLElement>; 
    onKeyDownCapture?: KeyboardEventHandler<HTMLElement>; 
    onKeyPress?: KeyboardEventHandler<HTMLElement>; 
    onKeyPressCapture?: KeyboardEventHandler<HTMLElement>; 
    onKeyUp?: KeyboardEventHandler<HTMLElement>; 
    onKeyUpCapture?: KeyboardEventHandler<HTMLElement>; 
    onLoad?: ReactEventHandler<HTMLElement>; 
    onLoadCapture?: ReactEventHandler<HTMLElement>; 
    onLoadStart?: ReactEventHandler<HTMLElement>; 
    onLoadStartCapture?: ReactEventHandler<HTMLElement>; 
    onLoadedData?: ReactEventHandler<HTMLElement>; 
    onLoadedDataCapture?: ReactEventHandler<HTMLElement>; 
    onLoadedMetadata?: ReactEventHandler<HTMLElement>; 
    onLoadedMetadataCapture?: ReactEventHandler<HTMLElement>; 
    onLostPointerCapture?: PointerEventHandler<HTMLElement>; 
    onLostPointerCaptureCapture?: PointerEventHandler<HTMLElement>; 
    onMouseDown?: MouseEventHandler<HTMLElement>; 
    onMouseDownCapture?: MouseEventHandler<HTMLElement>; 
    onMouseEnter?: MouseEventHandler<HTMLElement>; 
    onMouseLeave?: MouseEventHandler<HTMLElement>; 
    onMouseMove?: MouseEventHandler<HTMLElement>; 
    onMouseMoveCapture?: MouseEventHandler<HTMLElement>; 
    onMouseOut?: MouseEventHandler<HTMLElement>; 
    onMouseOutCapture?: MouseEventHandler<HTMLElement>; 
    onMouseOver?: MouseEventHandler<HTMLElement>; 
    onMouseOverCapture?: MouseEventHandler<HTMLElement>; 
    onMouseUp?: MouseEventHandler<HTMLElement>; 
    onMouseUpCapture?: MouseEventHandler<HTMLElement>; 
    onPaste?: ClipboardEventHandler<HTMLElement>; 
    onPasteCapture?: ClipboardEventHandler<HTMLElement>; 
    onPause?: ReactEventHandler<HTMLElement>; 
    onPauseCapture?: ReactEventHandler<HTMLElement>; 
    onPlay?: ReactEventHandler<HTMLElement>; 
    onPlayCapture?: ReactEventHandler<HTMLElement>; 
    onPlaying?: ReactEventHandler<HTMLElement>; 
    onPlayingCapture?: ReactEventHandler<HTMLElement>; 
    onPointerCancel?: PointerEventHandler<HTMLElement>; 
    onPointerCancelCapture?: PointerEventHandler<HTMLElement>; 
    onPointerDown?: PointerEventHandler<HTMLElement>; 
    onPointerDownCapture?: PointerEventHandler<HTMLElement>; 
    onPointerEnter?: PointerEventHandler<HTMLElement>; 
    onPointerEnterCapture?: PointerEventHandler<HTMLElement>; 
    onPointerLeave?: PointerEventHandler<HTMLElement>; 
    onPointerLeaveCapture?: PointerEventHandler<HTMLElement>; 
    onPointerMove?: PointerEventHandler<HTMLElement>; 
    onPointerMoveCapture?: PointerEventHandler<HTMLElement>; 
    onPointerOut?: PointerEventHandler<HTMLElement>; 
    onPointerOutCapture?: PointerEventHandler<HTMLElement>; 
    onPointerOver?: PointerEventHandler<HTMLElement>; 
    onPointerOverCapture?: PointerEventHandler<HTMLElement>; 
    onPointerUp?: PointerEventHandler<HTMLElement>; 
    onPointerUpCapture?: PointerEventHandler<HTMLElement>; 
    onProgress?: ReactEventHandler<HTMLElement>; 
    onProgressCapture?: ReactEventHandler<HTMLElement>; 
    onRateChange?: ReactEventHandler<HTMLElement>; 
    onRateChangeCapture?: ReactEventHandler<HTMLElement>; 
    onReset?: FormEventHandler<HTMLElement>; 
    onResetCapture?: FormEventHandler<HTMLElement>; 
    onResize?: ReactEventHandler<HTMLElement>; 
    onResizeCapture?: ReactEventHandler<HTMLElement>; 
    onScroll?: UIEventHandler<HTMLElement>; 
    onScrollCapture?: UIEventHandler<HTMLElement>; 
    onSeeked?: ReactEventHandler<HTMLElement>; 
    onSeekedCapture?: ReactEventHandler<HTMLElement>; 
    onSeeking?: ReactEventHandler<HTMLElement>; 
    onSeekingCapture?: ReactEventHandler<HTMLElement>; 
    onSelect?: ReactEventHandler<HTMLElement>; 
    onSelectCapture?: ReactEventHandler<HTMLElement>; 
    onStalled?: ReactEventHandler<HTMLElement>; 
    onStalledCapture?: ReactEventHandler<HTMLElement>; 
    onSubmit?: FormEventHandler<HTMLElement>; 
    onSubmitCapture?: FormEventHandler<HTMLElement>; 
    onSuspend?: ReactEventHandler<HTMLElement>; 
    onSuspendCapture?: ReactEventHandler<HTMLElement>; 
    onTimeUpdate?: ReactEventHandler<HTMLElement>; 
    onTimeUpdateCapture?: ReactEventHandler<HTMLElement>; 
    onTouchCancel?: TouchEventHandler<HTMLElement>; 
    onTouchCancelCapture?: TouchEventHandler<HTMLElement>; 
    onTouchEnd?: TouchEventHandler<HTMLElement>; 
    onTouchEndCapture?: TouchEventHandler<HTMLElement>; 
    onTouchMove?: TouchEventHandler<HTMLElement>; 
    onTouchMoveCapture?: TouchEventHandler<HTMLElement>; 
    onTouchStart?: TouchEventHandler<HTMLElement>; 
    onTouchStartCapture?: TouchEventHandler<HTMLElement>; 
    onTransitionEnd?: TransitionEventHandler<HTMLElement>; 
    onTransitionEndCapture?: TransitionEventHandler<HTMLElement>; 
    onVolumeChange?: ReactEventHandler<HTMLElement>; 
    onVolumeChangeCapture?: ReactEventHandler<HTMLElement>; 
    onWaiting?: ReactEventHandler<HTMLElement>; 
    onWaitingCapture?: ReactEventHandler<HTMLElement>; 
    onWheel?: WheelEventHandler<HTMLElement>; 
    onWheelCapture?: WheelEventHandler<HTMLElement>; 
    open?: boolean; 
    optimum?: number; 
    pattern?: string; 
    placeholder?: string; 
    playsInline?: boolean; 
    poster?: string; 
    prefix?: string; 
    preload?: string; 
    property?: string; 
    radioGroup?: string; 
    readOnly?: boolean; 
    ref?: LegacyRef<HTMLElement>; 
    rel?: string; 
    required?: boolean; 
    resource?: string; 
    results?: number; 
    rev?: string; 
    reversed?: boolean; 
    role?: AriaRole; 
    rowSpan?: number; 
    rows?: number; 
    sandbox?: string; 
    scope?: string; 
    scoped?: boolean; 
    scrolling?: string; 
    seamless?: boolean; 
    security?: string; 
    selected?: boolean; 
    shape?: string; 
    size?: number; 
    sizes?: string; 
    slot?: string; 
    span?: number; 
    spellCheck?: Booleanish; 
    src?: string; 
    srcDoc?: string; 
    srcLang?: string; 
    srcSet?: string; 
    start?: number; 
    step?: string | number; 
    style?: CSSProperties; 
    summary?: string; 
    suppressContentEditableWarning?: boolean; 
    suppressHydrationWarning?: boolean; 
    tabIndex?: number; 
    tag?: keyof IntrinsicElements; 
    target?: string; 
    title?: string; 
    translate?: "yes" | "no"; 
    type?: string; 
    typeof?: string; 
    unselectable?: "on" | "off"; 
    useMap?: string; 
    value?: string | number | readonly string[]; 
    vocab?: string; 
    width?: string | number; 
    wmode?: string; 
    wrap?: string; 
}
Hierarchy
Properties
about?
+NextJsSSRThemeSwitcherProps | Code Documentation
Interface NextJsSSRThemeSwitcherProps
interface NextJsSSRThemeSwitcherProps { 
    about?: string; 
    accept?: string; 
    acceptCharset?: string; 
    accessKey?: string; 
    action?: string | ((formData) => void); 
    allowFullScreen?: boolean; 
    allowTransparency?: boolean; 
    alt?: string; 
    aria-activedescendant?: string; 
    aria-atomic?: Booleanish; 
    aria-autocomplete?: "list" | "none" | "inline" | "both"; 
    aria-braillelabel?: string; 
    aria-brailleroledescription?: string; 
    aria-busy?: Booleanish; 
    aria-checked?: boolean | "true" | "false" | "mixed"; 
    aria-colcount?: number; 
    aria-colindex?: number; 
    aria-colindextext?: string; 
    aria-colspan?: number; 
    aria-controls?: string; 
    aria-current?: boolean | "time" | "page" | "step" | "true" | "false" | "date" | "location"; 
    aria-describedby?: string; 
    aria-description?: string; 
    aria-details?: string; 
    aria-disabled?: Booleanish; 
    aria-dropeffect?: "link" | "none" | "copy" | "execute" | "move" | "popup"; 
    aria-errormessage?: string; 
    aria-expanded?: Booleanish; 
    aria-flowto?: string; 
    aria-grabbed?: Booleanish; 
    aria-haspopup?: boolean | "dialog" | "menu" | "grid" | "listbox" | "tree" | "true" | "false"; 
    aria-hidden?: Booleanish; 
    aria-invalid?: boolean | "true" | "false" | "grammar" | "spelling"; 
    aria-keyshortcuts?: string; 
    aria-label?: string; 
    aria-labelledby?: string; 
    aria-level?: number; 
    aria-live?: "off" | "assertive" | "polite"; 
    aria-modal?: Booleanish; 
    aria-multiline?: Booleanish; 
    aria-multiselectable?: Booleanish; 
    aria-orientation?: "horizontal" | "vertical"; 
    aria-owns?: string; 
    aria-placeholder?: string; 
    aria-posinset?: number; 
    aria-pressed?: boolean | "true" | "false" | "mixed"; 
    aria-readonly?: Booleanish; 
    aria-relevant?: "text" | "all" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals"; 
    aria-required?: Booleanish; 
    aria-roledescription?: string; 
    aria-rowcount?: number; 
    aria-rowindex?: number; 
    aria-rowindextext?: string; 
    aria-rowspan?: number; 
    aria-selected?: Booleanish; 
    aria-setsize?: number; 
    aria-sort?: "none" | "ascending" | "descending" | "other"; 
    aria-valuemax?: number; 
    aria-valuemin?: number; 
    aria-valuenow?: number; 
    aria-valuetext?: string; 
    as?: string; 
    async?: boolean; 
    autoCapitalize?: string; 
    autoComplete?: string; 
    autoCorrect?: string; 
    autoFocus?: boolean; 
    autoPlay?: boolean; 
    autoSave?: string; 
    capture?: boolean | "user" | "environment"; 
    cellPadding?: string | number; 
    cellSpacing?: string | number; 
    challenge?: string; 
    charSet?: string; 
    checked?: boolean; 
    children?: ReactNode; 
    cite?: string; 
    classID?: string; 
    className?: string; 
    colSpan?: number; 
    color?: string; 
    cols?: number; 
    content?: string; 
    contentEditable?: Booleanish | "inherit" | "plaintext-only"; 
    contextMenu?: string; 
    controls?: boolean; 
    coords?: string; 
    crossOrigin?: CrossOrigin; 
    dangerouslySetInnerHTML?: { 
        __html: string | TrustedHTML; 
    }; 
    data?: string; 
    datatype?: string; 
    dateTime?: string; 
    default?: boolean; 
    defaultChecked?: boolean; 
    defaultValue?: string | number | readonly string[]; 
    defer?: boolean; 
    dir?: string; 
    disabled?: boolean; 
    download?: any; 
    draggable?: Booleanish; 
    encType?: string; 
    forcedPages?: ForcedPage[]; 
    form?: string; 
    formAction?: string | ((formData) => void); 
    formEncType?: string; 
    formMethod?: string; 
    formNoValidate?: boolean; 
    formTarget?: string; 
    frameBorder?: string | number; 
    headers?: string; 
    height?: string | number; 
    hidden?: boolean; 
    high?: number; 
    href?: string; 
    hrefLang?: string; 
    htmlFor?: string; 
    httpEquiv?: string; 
    id?: string; 
    inlist?: any; 
    inputMode?: "search" | "text" | "none" | "tel" | "url" | "email" | "numeric" | "decimal"; 
    integrity?: string; 
    is?: string; 
    itemID?: string; 
    itemProp?: string; 
    itemRef?: string; 
    itemScope?: boolean; 
    itemType?: string; 
    key?: null | Key; 
    keyParams?: string; 
    keyType?: string; 
    kind?: string; 
    label?: string; 
    lang?: string; 
    list?: string; 
    loop?: boolean; 
    low?: number; 
    manifest?: string; 
    marginHeight?: number; 
    marginWidth?: number; 
    max?: string | number; 
    maxLength?: number; 
    media?: string; 
    mediaGroup?: string; 
    method?: string; 
    min?: string | number; 
    minLength?: number; 
    multiple?: boolean; 
    muted?: boolean; 
    name?: string; 
    noValidate?: boolean; 
    nonce?: string; 
    onAbort?: ReactEventHandler<HTMLElement>; 
    onAbortCapture?: ReactEventHandler<HTMLElement>; 
    onAnimationEnd?: AnimationEventHandler<HTMLElement>; 
    onAnimationEndCapture?: AnimationEventHandler<HTMLElement>; 
    onAnimationIteration?: AnimationEventHandler<HTMLElement>; 
    onAnimationIterationCapture?: AnimationEventHandler<HTMLElement>; 
    onAnimationStart?: AnimationEventHandler<HTMLElement>; 
    onAnimationStartCapture?: AnimationEventHandler<HTMLElement>; 
    onAuxClick?: MouseEventHandler<HTMLElement>; 
    onAuxClickCapture?: MouseEventHandler<HTMLElement>; 
    onBeforeInput?: FormEventHandler<HTMLElement>; 
    onBeforeInputCapture?: FormEventHandler<HTMLElement>; 
    onBlur?: FocusEventHandler<HTMLElement>; 
    onBlurCapture?: FocusEventHandler<HTMLElement>; 
    onCanPlay?: ReactEventHandler<HTMLElement>; 
    onCanPlayCapture?: ReactEventHandler<HTMLElement>; 
    onCanPlayThrough?: ReactEventHandler<HTMLElement>; 
    onCanPlayThroughCapture?: ReactEventHandler<HTMLElement>; 
    onChange?: FormEventHandler<HTMLElement>; 
    onChangeCapture?: FormEventHandler<HTMLElement>; 
    onClick?: MouseEventHandler<HTMLElement>; 
    onClickCapture?: MouseEventHandler<HTMLElement>; 
    onCompositionEnd?: CompositionEventHandler<HTMLElement>; 
    onCompositionEndCapture?: CompositionEventHandler<HTMLElement>; 
    onCompositionStart?: CompositionEventHandler<HTMLElement>; 
    onCompositionStartCapture?: CompositionEventHandler<HTMLElement>; 
    onCompositionUpdate?: CompositionEventHandler<HTMLElement>; 
    onCompositionUpdateCapture?: CompositionEventHandler<HTMLElement>; 
    onContextMenu?: MouseEventHandler<HTMLElement>; 
    onContextMenuCapture?: MouseEventHandler<HTMLElement>; 
    onCopy?: ClipboardEventHandler<HTMLElement>; 
    onCopyCapture?: ClipboardEventHandler<HTMLElement>; 
    onCut?: ClipboardEventHandler<HTMLElement>; 
    onCutCapture?: ClipboardEventHandler<HTMLElement>; 
    onDoubleClick?: MouseEventHandler<HTMLElement>; 
    onDoubleClickCapture?: MouseEventHandler<HTMLElement>; 
    onDrag?: DragEventHandler<HTMLElement>; 
    onDragCapture?: DragEventHandler<HTMLElement>; 
    onDragEnd?: DragEventHandler<HTMLElement>; 
    onDragEndCapture?: DragEventHandler<HTMLElement>; 
    onDragEnter?: DragEventHandler<HTMLElement>; 
    onDragEnterCapture?: DragEventHandler<HTMLElement>; 
    onDragExit?: DragEventHandler<HTMLElement>; 
    onDragExitCapture?: DragEventHandler<HTMLElement>; 
    onDragLeave?: DragEventHandler<HTMLElement>; 
    onDragLeaveCapture?: DragEventHandler<HTMLElement>; 
    onDragOver?: DragEventHandler<HTMLElement>; 
    onDragOverCapture?: DragEventHandler<HTMLElement>; 
    onDragStart?: DragEventHandler<HTMLElement>; 
    onDragStartCapture?: DragEventHandler<HTMLElement>; 
    onDrop?: DragEventHandler<HTMLElement>; 
    onDropCapture?: DragEventHandler<HTMLElement>; 
    onDurationChange?: ReactEventHandler<HTMLElement>; 
    onDurationChangeCapture?: ReactEventHandler<HTMLElement>; 
    onEmptied?: ReactEventHandler<HTMLElement>; 
    onEmptiedCapture?: ReactEventHandler<HTMLElement>; 
    onEncrypted?: ReactEventHandler<HTMLElement>; 
    onEncryptedCapture?: ReactEventHandler<HTMLElement>; 
    onEnded?: ReactEventHandler<HTMLElement>; 
    onEndedCapture?: ReactEventHandler<HTMLElement>; 
    onError?: ReactEventHandler<HTMLElement>; 
    onErrorCapture?: ReactEventHandler<HTMLElement>; 
    onFocus?: FocusEventHandler<HTMLElement>; 
    onFocusCapture?: FocusEventHandler<HTMLElement>; 
    onGotPointerCapture?: PointerEventHandler<HTMLElement>; 
    onGotPointerCaptureCapture?: PointerEventHandler<HTMLElement>; 
    onInput?: FormEventHandler<HTMLElement>; 
    onInputCapture?: FormEventHandler<HTMLElement>; 
    onInvalid?: FormEventHandler<HTMLElement>; 
    onInvalidCapture?: FormEventHandler<HTMLElement>; 
    onKeyDown?: KeyboardEventHandler<HTMLElement>; 
    onKeyDownCapture?: KeyboardEventHandler<HTMLElement>; 
    onKeyPress?: KeyboardEventHandler<HTMLElement>; 
    onKeyPressCapture?: KeyboardEventHandler<HTMLElement>; 
    onKeyUp?: KeyboardEventHandler<HTMLElement>; 
    onKeyUpCapture?: KeyboardEventHandler<HTMLElement>; 
    onLoad?: ReactEventHandler<HTMLElement>; 
    onLoadCapture?: ReactEventHandler<HTMLElement>; 
    onLoadStart?: ReactEventHandler<HTMLElement>; 
    onLoadStartCapture?: ReactEventHandler<HTMLElement>; 
    onLoadedData?: ReactEventHandler<HTMLElement>; 
    onLoadedDataCapture?: ReactEventHandler<HTMLElement>; 
    onLoadedMetadata?: ReactEventHandler<HTMLElement>; 
    onLoadedMetadataCapture?: ReactEventHandler<HTMLElement>; 
    onLostPointerCapture?: PointerEventHandler<HTMLElement>; 
    onLostPointerCaptureCapture?: PointerEventHandler<HTMLElement>; 
    onMouseDown?: MouseEventHandler<HTMLElement>; 
    onMouseDownCapture?: MouseEventHandler<HTMLElement>; 
    onMouseEnter?: MouseEventHandler<HTMLElement>; 
    onMouseLeave?: MouseEventHandler<HTMLElement>; 
    onMouseMove?: MouseEventHandler<HTMLElement>; 
    onMouseMoveCapture?: MouseEventHandler<HTMLElement>; 
    onMouseOut?: MouseEventHandler<HTMLElement>; 
    onMouseOutCapture?: MouseEventHandler<HTMLElement>; 
    onMouseOver?: MouseEventHandler<HTMLElement>; 
    onMouseOverCapture?: MouseEventHandler<HTMLElement>; 
    onMouseUp?: MouseEventHandler<HTMLElement>; 
    onMouseUpCapture?: MouseEventHandler<HTMLElement>; 
    onPaste?: ClipboardEventHandler<HTMLElement>; 
    onPasteCapture?: ClipboardEventHandler<HTMLElement>; 
    onPause?: ReactEventHandler<HTMLElement>; 
    onPauseCapture?: ReactEventHandler<HTMLElement>; 
    onPlay?: ReactEventHandler<HTMLElement>; 
    onPlayCapture?: ReactEventHandler<HTMLElement>; 
    onPlaying?: ReactEventHandler<HTMLElement>; 
    onPlayingCapture?: ReactEventHandler<HTMLElement>; 
    onPointerCancel?: PointerEventHandler<HTMLElement>; 
    onPointerCancelCapture?: PointerEventHandler<HTMLElement>; 
    onPointerDown?: PointerEventHandler<HTMLElement>; 
    onPointerDownCapture?: PointerEventHandler<HTMLElement>; 
    onPointerEnter?: PointerEventHandler<HTMLElement>; 
    onPointerEnterCapture?: PointerEventHandler<HTMLElement>; 
    onPointerLeave?: PointerEventHandler<HTMLElement>; 
    onPointerLeaveCapture?: PointerEventHandler<HTMLElement>; 
    onPointerMove?: PointerEventHandler<HTMLElement>; 
    onPointerMoveCapture?: PointerEventHandler<HTMLElement>; 
    onPointerOut?: PointerEventHandler<HTMLElement>; 
    onPointerOutCapture?: PointerEventHandler<HTMLElement>; 
    onPointerOver?: PointerEventHandler<HTMLElement>; 
    onPointerOverCapture?: PointerEventHandler<HTMLElement>; 
    onPointerUp?: PointerEventHandler<HTMLElement>; 
    onPointerUpCapture?: PointerEventHandler<HTMLElement>; 
    onProgress?: ReactEventHandler<HTMLElement>; 
    onProgressCapture?: ReactEventHandler<HTMLElement>; 
    onRateChange?: ReactEventHandler<HTMLElement>; 
    onRateChangeCapture?: ReactEventHandler<HTMLElement>; 
    onReset?: FormEventHandler<HTMLElement>; 
    onResetCapture?: FormEventHandler<HTMLElement>; 
    onResize?: ReactEventHandler<HTMLElement>; 
    onResizeCapture?: ReactEventHandler<HTMLElement>; 
    onScroll?: UIEventHandler<HTMLElement>; 
    onScrollCapture?: UIEventHandler<HTMLElement>; 
    onSeeked?: ReactEventHandler<HTMLElement>; 
    onSeekedCapture?: ReactEventHandler<HTMLElement>; 
    onSeeking?: ReactEventHandler<HTMLElement>; 
    onSeekingCapture?: ReactEventHandler<HTMLElement>; 
    onSelect?: ReactEventHandler<HTMLElement>; 
    onSelectCapture?: ReactEventHandler<HTMLElement>; 
    onStalled?: ReactEventHandler<HTMLElement>; 
    onStalledCapture?: ReactEventHandler<HTMLElement>; 
    onSubmit?: FormEventHandler<HTMLElement>; 
    onSubmitCapture?: FormEventHandler<HTMLElement>; 
    onSuspend?: ReactEventHandler<HTMLElement>; 
    onSuspendCapture?: ReactEventHandler<HTMLElement>; 
    onTimeUpdate?: ReactEventHandler<HTMLElement>; 
    onTimeUpdateCapture?: ReactEventHandler<HTMLElement>; 
    onTouchCancel?: TouchEventHandler<HTMLElement>; 
    onTouchCancelCapture?: TouchEventHandler<HTMLElement>; 
    onTouchEnd?: TouchEventHandler<HTMLElement>; 
    onTouchEndCapture?: TouchEventHandler<HTMLElement>; 
    onTouchMove?: TouchEventHandler<HTMLElement>; 
    onTouchMoveCapture?: TouchEventHandler<HTMLElement>; 
    onTouchStart?: TouchEventHandler<HTMLElement>; 
    onTouchStartCapture?: TouchEventHandler<HTMLElement>; 
    onTransitionEnd?: TransitionEventHandler<HTMLElement>; 
    onTransitionEndCapture?: TransitionEventHandler<HTMLElement>; 
    onVolumeChange?: ReactEventHandler<HTMLElement>; 
    onVolumeChangeCapture?: ReactEventHandler<HTMLElement>; 
    onWaiting?: ReactEventHandler<HTMLElement>; 
    onWaitingCapture?: ReactEventHandler<HTMLElement>; 
    onWheel?: WheelEventHandler<HTMLElement>; 
    onWheelCapture?: WheelEventHandler<HTMLElement>; 
    open?: boolean; 
    optimum?: number; 
    pattern?: string; 
    placeholder?: string; 
    playsInline?: boolean; 
    poster?: string; 
    prefix?: string; 
    preload?: string; 
    property?: string; 
    radioGroup?: string; 
    readOnly?: boolean; 
    ref?: LegacyRef<HTMLElement>; 
    rel?: string; 
    required?: boolean; 
    resource?: string; 
    results?: number; 
    rev?: string; 
    reversed?: boolean; 
    role?: AriaRole; 
    rowSpan?: number; 
    rows?: number; 
    sandbox?: string; 
    scope?: string; 
    scoped?: boolean; 
    scrolling?: string; 
    seamless?: boolean; 
    security?: string; 
    selected?: boolean; 
    shape?: string; 
    size?: number; 
    sizes?: string; 
    slot?: string; 
    span?: number; 
    spellCheck?: Booleanish; 
    src?: string; 
    srcDoc?: string; 
    srcLang?: string; 
    srcSet?: string; 
    start?: number; 
    step?: string | number; 
    style?: CSSProperties; 
    summary?: string; 
    suppressContentEditableWarning?: boolean; 
    suppressHydrationWarning?: boolean; 
    tabIndex?: number; 
    tag?: keyof IntrinsicElements; 
    target?: string; 
    title?: string; 
    translate?: "yes" | "no"; 
    type?: string; 
    typeof?: string; 
    unselectable?: "on" | "off"; 
    useMap?: string; 
    value?: string | number | readonly string[]; 
    vocab?: string; 
    width?: string | number; 
    wmode?: string; 
    wrap?: string; 
}
Hierarchy
Properties
about?
 accept?
 acceptCharset?
 accessKey?
@@ -487,10 +487,10 @@
 
See
aria-valuetext.

 
Optional aria-valuetext
aria-valuetext?: string
Defines the human readable text alternative of aria-valuenow for a range widget.

 
Optional as
as?: string
Optional async
async?: boolean
Optional autoCapitalize
autoCapitalize?: string
Non-standard Attributes

-
Optional autoComplete
autoComplete?: string
Optional autoCorrect
autoCorrect?: string
Optional autoFocus
autoFocus?: boolean
Optional autoPlay
autoPlay?: boolean
Optional autoSave
autoSave?: string
Optional capture
capture?: boolean | "user" | "environment"
Optional cellPadding
cellPadding?: string | number
Optional cellSpacing
cellSpacing?: string | number
Optional challenge
challenge?: string
Optional charSet
charSet?: string
Optional checked
checked?: boolean
Optional children
children?: ReactNode
Optional cite
cite?: string
Optional classID
classID?: string
Optional className
className?: string
Optional colSpan
colSpan?: number
Optional color
color?: string
Optional cols
cols?: number
Optional content
content?: string
Optional contentEditable
contentEditable?: Booleanish | "inherit" | "plaintext-only"
Optional contextMenu
contextMenu?: string
Optional controls
controls?: boolean
Optional coords
coords?: string
Optional crossOrigin
crossOrigin?: CrossOrigin
Optional dangerouslySetInnerHTML
dangerouslySetInnerHTML?: { 
    __html: string | TrustedHTML; 
}
Type declaration
  • __html: string | TrustedHTML
    Should be InnerHTML['innerHTML'].
+
Optional autoComplete
autoComplete?: string
Optional autoCorrect
autoCorrect?: string
Optional autoFocus
autoFocus?: boolean
Optional autoPlay
autoPlay?: boolean
Optional autoSave
autoSave?: string
Optional capture
capture?: boolean | "user" | "environment"
Optional cellPadding
cellPadding?: string | number
Optional cellSpacing
cellSpacing?: string | number
Optional challenge
challenge?: string
Optional charSet
charSet?: string
Optional checked
checked?: boolean
Optional children
children?: ReactNode
Optional cite
cite?: string
Optional classID
classID?: string
Optional className
className?: string
Optional colSpan
colSpan?: number
Optional color
color?: string
Optional cols
cols?: number
Optional content
content?: string
Optional contentEditable
contentEditable?: Booleanish | "inherit" | "plaintext-only"
Optional contextMenu
contextMenu?: string
Optional controls
controls?: boolean
Optional coords
coords?: string
Optional crossOrigin
crossOrigin?: CrossOrigin
Optional dangerouslySetInnerHTML
dangerouslySetInnerHTML?: { 
    __html: string | TrustedHTML; 
}
Type declaration
  • __html: string | TrustedHTML
    Should be InnerHTML['innerHTML'].
 But unfortunately we're mixing renderer-specific type declarations.
    
 
Optional data
data?: string
Optional datatype
datatype?: string
Optional dateTime
dateTime?: string
Optional default
default?: boolean
Optional defaultChecked
defaultChecked?: boolean
React-specific Attributes

-
Optional defaultValue
defaultValue?: string | number | readonly string[]
Optional defer
defer?: boolean
Optional dir
dir?: string
Optional disabled
disabled?: boolean
Optional download
download?: any
Optional draggable
draggable?: Booleanish
Optional encType
encType?: string
Optional forcedPages
forcedPages?: ForcedPage[]
Optional form
form?: string
Optional formAction
formAction?: string | ((formData) => void)
Type declaration
    • (formData): void
    • Parameters
      • formData: FormData
      Returns void
Optional formEncType
formEncType?: string
Optional formMethod
formMethod?: string
Optional formNoValidate
formNoValidate?: boolean
Optional formTarget
formTarget?: string
Optional frameBorder
frameBorder?: string | number
Optional headers
headers?: string
Optional height
height?: string | number
Optional hidden
hidden?: boolean
Optional high
high?: number
Optional href
href?: string
Optional hrefLang
hrefLang?: string
Optional htmlFor
htmlFor?: string
Optional httpEquiv
httpEquiv?: string
Optional id
id?: string
Optional inlist
inlist?: any
Optional inputMode
inputMode?: "search" | "text" | "none" | "tel" | "url" | "email" | "numeric" | "decimal"
Hints at the type of data that might be entered by the user while editing the element or its contents

+
Optional defaultValue
defaultValue?: string | number | readonly string[]
Optional defer
defer?: boolean
Optional dir
dir?: string
Optional disabled
disabled?: boolean
Optional download
download?: any
Optional draggable
draggable?: Booleanish
Optional encType
encType?: string
Optional forcedPages
forcedPages?: ForcedPage[]
Optional form
form?: string
Optional formAction
formAction?: string | ((formData) => void)
Type declaration
    • (formData): void
    • Parameters
      • formData: FormData
      Returns void
Optional formEncType
formEncType?: string
Optional formMethod
formMethod?: string
Optional formNoValidate
formNoValidate?: boolean
Optional formTarget
formTarget?: string
Optional frameBorder
frameBorder?: string | number
Optional headers
headers?: string
Optional height
height?: string | number
Optional hidden
hidden?: boolean
Optional high
high?: number
Optional href
href?: string
Optional hrefLang
hrefLang?: string
Optional htmlFor
htmlFor?: string
Optional httpEquiv
httpEquiv?: string
Optional id
id?: string
Optional inlist
inlist?: any
Optional inputMode
inputMode?: "search" | "text" | "none" | "tel" | "url" | "email" | "numeric" | "decimal"
Hints at the type of data that might be entered by the user while editing the element or its contents

 
See
https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute

 
Optional integrity
integrity?: string
Optional is
is?: string
Specify that a standard HTML element should behave like a defined custom built-in element

 
See
https://html.spec.whatwg.org/multipage/custom-elements.html#attr-is

@@ -516,4 +516,4 @@
 
Optional rel
rel?: string
Optional required
required?: boolean
Optional resource
resource?: string
Optional results
results?: number
Optional rev
rev?: string
Optional reversed
reversed?: boolean
Optional role
role?: AriaRole
WAI-ARIA

 
Optional rowSpan
rowSpan?: number
Optional rows
rows?: number
Optional sandbox
sandbox?: string
Optional scope
scope?: string
Optional scoped
scoped?: boolean
Optional scrolling
scrolling?: string
Optional seamless
seamless?: boolean
Optional security
security?: string
Optional selected
selected?: boolean
Optional shape
shape?: string
Optional size
size?: number
Optional sizes
sizes?: string
Optional slot
slot?: string
Optional span
span?: number
Optional spellCheck
spellCheck?: Booleanish
Optional src
src?: string
Optional srcDoc
srcDoc?: string
Optional srcLang
srcLang?: string
Optional srcSet
srcSet?: string
Optional start
start?: number
Optional step
step?: string | number
Optional style
style?: CSSProperties
Optional summary
summary?: string
Optional suppressContentEditableWarning
suppressContentEditableWarning?: boolean
Optional suppressHydrationWarning
suppressHydrationWarning?: boolean
Optional tabIndex
tabIndex?: number
Optional tag
tag?: keyof IntrinsicElements
Default Value
'div'
 

-
Optional target
target?: string
Optional title
title?: string
Optional translate
translate?: "yes" | "no"
Optional type
type?: string
Optional typeof
typeof?: string
Optional unselectable
unselectable?: "on" | "off"
Optional useMap
useMap?: string
Optional value
value?: string | number | readonly string[]
Optional vocab
vocab?: string
Optional width
width?: string | number
Optional wmode
wmode?: string
Optional wrap
wrap?: string
Settings
Member Visibility
Theme
On This Page
Generated using TypeDoc

\ No newline at end of file
+
Optional target
target?: string
Optional title
title?: string
Optional translate
translate?: "yes" | "no"
Optional type
type?: string
Optional typeof
typeof?: string
Optional unselectable
unselectable?: "on" | "off"
Optional useMap
useMap?: string
Optional value
value?: string | number | readonly string[]
Optional vocab
vocab?: string
Optional width
width?: string | number
Optional wmode
wmode?: string
Optional wrap
wrap?: string
Settings
Member Visibility
Theme
On This Page
Generated using TypeDoc

\ No newline at end of file
diff --git a/docs/interfaces/server_nextjs_server_side_wrapper_server_side_wrapper.ServerSideWrapperProps.html b/docs/interfaces/server_nextjs_server_side_wrapper_server_side_wrapper.ServerSideWrapperProps.html
index aadf4528..1938c9bb 100644
--- a/docs/interfaces/server_nextjs_server_side_wrapper_server_side_wrapper.ServerSideWrapperProps.html
+++ b/docs/interfaces/server_nextjs_server_side_wrapper_server_side_wrapper.ServerSideWrapperProps.html
@@ -1,4 +1,4 @@
-ServerSideWrapperProps | Code Documentation
Interface ServerSideWrapperProps
interface ServerSideWrapperProps { 
    about?: string; 
    accept?: string; 
    acceptCharset?: string; 
    accessKey?: string; 
    action?: string | ((formData) => void); 
    allowFullScreen?: boolean; 
    allowTransparency?: boolean; 
    alt?: string; 
    aria-activedescendant?: string; 
    aria-atomic?: Booleanish; 
    aria-autocomplete?: "list" | "none" | "inline" | "both"; 
    aria-braillelabel?: string; 
    aria-brailleroledescription?: string; 
    aria-busy?: Booleanish; 
    aria-checked?: boolean | "true" | "false" | "mixed"; 
    aria-colcount?: number; 
    aria-colindex?: number; 
    aria-colindextext?: string; 
    aria-colspan?: number; 
    aria-controls?: string; 
    aria-current?: boolean | "time" | "page" | "step" | "true" | "false" | "date" | "location"; 
    aria-describedby?: string; 
    aria-description?: string; 
    aria-details?: string; 
    aria-disabled?: Booleanish; 
    aria-dropeffect?: "link" | "none" | "copy" | "execute" | "move" | "popup"; 
    aria-errormessage?: string; 
    aria-expanded?: Booleanish; 
    aria-flowto?: string; 
    aria-grabbed?: Booleanish; 
    aria-haspopup?: boolean | "dialog" | "menu" | "grid" | "listbox" | "tree" | "true" | "false"; 
    aria-hidden?: Booleanish; 
    aria-invalid?: boolean | "true" | "false" | "grammar" | "spelling"; 
    aria-keyshortcuts?: string; 
    aria-label?: string; 
    aria-labelledby?: string; 
    aria-level?: number; 
    aria-live?: "off" | "assertive" | "polite"; 
    aria-modal?: Booleanish; 
    aria-multiline?: Booleanish; 
    aria-multiselectable?: Booleanish; 
    aria-orientation?: "horizontal" | "vertical"; 
    aria-owns?: string; 
    aria-placeholder?: string; 
    aria-posinset?: number; 
    aria-pressed?: boolean | "true" | "false" | "mixed"; 
    aria-readonly?: Booleanish; 
    aria-relevant?: "text" | "all" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals"; 
    aria-required?: Booleanish; 
    aria-roledescription?: string; 
    aria-rowcount?: number; 
    aria-rowindex?: number; 
    aria-rowindextext?: string; 
    aria-rowspan?: number; 
    aria-selected?: Booleanish; 
    aria-setsize?: number; 
    aria-sort?: "none" | "ascending" | "descending" | "other"; 
    aria-valuemax?: number; 
    aria-valuemin?: number; 
    aria-valuenow?: number; 
    aria-valuetext?: string; 
    as?: string; 
    async?: boolean; 
    autoCapitalize?: string; 
    autoComplete?: string; 
    autoCorrect?: string; 
    autoFocus?: boolean; 
    autoPlay?: boolean; 
    autoSave?: string; 
    capture?: boolean | "user" | "environment"; 
    cellPadding?: string | number; 
    cellSpacing?: string | number; 
    challenge?: string; 
    charSet?: string; 
    checked?: boolean; 
    children?: ReactNode; 
    cite?: string; 
    classID?: string; 
    className?: string; 
    colSpan?: number; 
    color?: string; 
    cols?: number; 
    content?: string; 
    contentEditable?: Booleanish | "inherit" | "plaintext-only"; 
    contextMenu?: string; 
    controls?: boolean; 
    coords?: string; 
    crossOrigin?: CrossOrigin; 
    dangerouslySetInnerHTML?: { 
        __html: string | TrustedHTML; 
    }; 
    data?: string; 
    datatype?: string; 
    dateTime?: string; 
    default?: boolean; 
    defaultChecked?: boolean; 
    defaultValue?: string | number | readonly string[]; 
    defer?: boolean; 
    dir?: string; 
    disabled?: boolean; 
    download?: any; 
    draggable?: Booleanish; 
    encType?: string; 
    forcedPages?: ForcedPage[]; 
    form?: string; 
    formAction?: string | ((formData) => void); 
    formEncType?: string; 
    formMethod?: string; 
    formNoValidate?: boolean; 
    formTarget?: string; 
    frameBorder?: string | number; 
    headers?: string; 
    height?: string | number; 
    hidden?: boolean; 
    high?: number; 
    href?: string; 
    hrefLang?: string; 
    htmlFor?: string; 
    httpEquiv?: string; 
    id?: string; 
    inlist?: any; 
    inputMode?: "search" | "text" | "none" | "tel" | "url" | "email" | "numeric" | "decimal"; 
    integrity?: string; 
    is?: string; 
    itemID?: string; 
    itemProp?: string; 
    itemRef?: string; 
    itemScope?: boolean; 
    itemType?: string; 
    key?: null | Key; 
    keyParams?: string; 
    keyType?: string; 
    kind?: string; 
    label?: string; 
    lang?: string; 
    list?: string; 
    loop?: boolean; 
    low?: number; 
    manifest?: string; 
    marginHeight?: number; 
    marginWidth?: number; 
    max?: string | number; 
    maxLength?: number; 
    media?: string; 
    mediaGroup?: string; 
    method?: string; 
    min?: string | number; 
    minLength?: number; 
    multiple?: boolean; 
    muted?: boolean; 
    name?: string; 
    noValidate?: boolean; 
    nonce?: string; 
    onAbort?: ReactEventHandler<HTMLElement>; 
    onAbortCapture?: ReactEventHandler<HTMLElement>; 
    onAnimationEnd?: AnimationEventHandler<HTMLElement>; 
    onAnimationEndCapture?: AnimationEventHandler<HTMLElement>; 
    onAnimationIteration?: AnimationEventHandler<HTMLElement>; 
    onAnimationIterationCapture?: AnimationEventHandler<HTMLElement>; 
    onAnimationStart?: AnimationEventHandler<HTMLElement>; 
    onAnimationStartCapture?: AnimationEventHandler<HTMLElement>; 
    onAuxClick?: MouseEventHandler<HTMLElement>; 
    onAuxClickCapture?: MouseEventHandler<HTMLElement>; 
    onBeforeInput?: FormEventHandler<HTMLElement>; 
    onBeforeInputCapture?: FormEventHandler<HTMLElement>; 
    onBlur?: FocusEventHandler<HTMLElement>; 
    onBlurCapture?: FocusEventHandler<HTMLElement>; 
    onCanPlay?: ReactEventHandler<HTMLElement>; 
    onCanPlayCapture?: ReactEventHandler<HTMLElement>; 
    onCanPlayThrough?: ReactEventHandler<HTMLElement>; 
    onCanPlayThroughCapture?: ReactEventHandler<HTMLElement>; 
    onChange?: FormEventHandler<HTMLElement>; 
    onChangeCapture?: FormEventHandler<HTMLElement>; 
    onClick?: MouseEventHandler<HTMLElement>; 
    onClickCapture?: MouseEventHandler<HTMLElement>; 
    onCompositionEnd?: CompositionEventHandler<HTMLElement>; 
    onCompositionEndCapture?: CompositionEventHandler<HTMLElement>; 
    onCompositionStart?: CompositionEventHandler<HTMLElement>; 
    onCompositionStartCapture?: CompositionEventHandler<HTMLElement>; 
    onCompositionUpdate?: CompositionEventHandler<HTMLElement>; 
    onCompositionUpdateCapture?: CompositionEventHandler<HTMLElement>; 
    onContextMenu?: MouseEventHandler<HTMLElement>; 
    onContextMenuCapture?: MouseEventHandler<HTMLElement>; 
    onCopy?: ClipboardEventHandler<HTMLElement>; 
    onCopyCapture?: ClipboardEventHandler<HTMLElement>; 
    onCut?: ClipboardEventHandler<HTMLElement>; 
    onCutCapture?: ClipboardEventHandler<HTMLElement>; 
    onDoubleClick?: MouseEventHandler<HTMLElement>; 
    onDoubleClickCapture?: MouseEventHandler<HTMLElement>; 
    onDrag?: DragEventHandler<HTMLElement>; 
    onDragCapture?: DragEventHandler<HTMLElement>; 
    onDragEnd?: DragEventHandler<HTMLElement>; 
    onDragEndCapture?: DragEventHandler<HTMLElement>; 
    onDragEnter?: DragEventHandler<HTMLElement>; 
    onDragEnterCapture?: DragEventHandler<HTMLElement>; 
    onDragExit?: DragEventHandler<HTMLElement>; 
    onDragExitCapture?: DragEventHandler<HTMLElement>; 
    onDragLeave?: DragEventHandler<HTMLElement>; 
    onDragLeaveCapture?: DragEventHandler<HTMLElement>; 
    onDragOver?: DragEventHandler<HTMLElement>; 
    onDragOverCapture?: DragEventHandler<HTMLElement>; 
    onDragStart?: DragEventHandler<HTMLElement>; 
    onDragStartCapture?: DragEventHandler<HTMLElement>; 
    onDrop?: DragEventHandler<HTMLElement>; 
    onDropCapture?: DragEventHandler<HTMLElement>; 
    onDurationChange?: ReactEventHandler<HTMLElement>; 
    onDurationChangeCapture?: ReactEventHandler<HTMLElement>; 
    onEmptied?: ReactEventHandler<HTMLElement>; 
    onEmptiedCapture?: ReactEventHandler<HTMLElement>; 
    onEncrypted?: ReactEventHandler<HTMLElement>; 
    onEncryptedCapture?: ReactEventHandler<HTMLElement>; 
    onEnded?: ReactEventHandler<HTMLElement>; 
    onEndedCapture?: ReactEventHandler<HTMLElement>; 
    onError?: ReactEventHandler<HTMLElement>; 
    onErrorCapture?: ReactEventHandler<HTMLElement>; 
    onFocus?: FocusEventHandler<HTMLElement>; 
    onFocusCapture?: FocusEventHandler<HTMLElement>; 
    onGotPointerCapture?: PointerEventHandler<HTMLElement>; 
    onGotPointerCaptureCapture?: PointerEventHandler<HTMLElement>; 
    onInput?: FormEventHandler<HTMLElement>; 
    onInputCapture?: FormEventHandler<HTMLElement>; 
    onInvalid?: FormEventHandler<HTMLElement>; 
    onInvalidCapture?: FormEventHandler<HTMLElement>; 
    onKeyDown?: KeyboardEventHandler<HTMLElement>; 
    onKeyDownCapture?: KeyboardEventHandler<HTMLElement>; 
    onKeyPress?: KeyboardEventHandler<HTMLElement>; 
    onKeyPressCapture?: KeyboardEventHandler<HTMLElement>; 
    onKeyUp?: KeyboardEventHandler<HTMLElement>; 
    onKeyUpCapture?: KeyboardEventHandler<HTMLElement>; 
    onLoad?: ReactEventHandler<HTMLElement>; 
    onLoadCapture?: ReactEventHandler<HTMLElement>; 
    onLoadStart?: ReactEventHandler<HTMLElement>; 
    onLoadStartCapture?: ReactEventHandler<HTMLElement>; 
    onLoadedData?: ReactEventHandler<HTMLElement>; 
    onLoadedDataCapture?: ReactEventHandler<HTMLElement>; 
    onLoadedMetadata?: ReactEventHandler<HTMLElement>; 
    onLoadedMetadataCapture?: ReactEventHandler<HTMLElement>; 
    onLostPointerCapture?: PointerEventHandler<HTMLElement>; 
    onLostPointerCaptureCapture?: PointerEventHandler<HTMLElement>; 
    onMouseDown?: MouseEventHandler<HTMLElement>; 
    onMouseDownCapture?: MouseEventHandler<HTMLElement>; 
    onMouseEnter?: MouseEventHandler<HTMLElement>; 
    onMouseLeave?: MouseEventHandler<HTMLElement>; 
    onMouseMove?: MouseEventHandler<HTMLElement>; 
    onMouseMoveCapture?: MouseEventHandler<HTMLElement>; 
    onMouseOut?: MouseEventHandler<HTMLElement>; 
    onMouseOutCapture?: MouseEventHandler<HTMLElement>; 
    onMouseOver?: MouseEventHandler<HTMLElement>; 
    onMouseOverCapture?: MouseEventHandler<HTMLElement>; 
    onMouseUp?: MouseEventHandler<HTMLElement>; 
    onMouseUpCapture?: MouseEventHandler<HTMLElement>; 
    onPaste?: ClipboardEventHandler<HTMLElement>; 
    onPasteCapture?: ClipboardEventHandler<HTMLElement>; 
    onPause?: ReactEventHandler<HTMLElement>; 
    onPauseCapture?: ReactEventHandler<HTMLElement>; 
    onPlay?: ReactEventHandler<HTMLElement>; 
    onPlayCapture?: ReactEventHandler<HTMLElement>; 
    onPlaying?: ReactEventHandler<HTMLElement>; 
    onPlayingCapture?: ReactEventHandler<HTMLElement>; 
    onPointerCancel?: PointerEventHandler<HTMLElement>; 
    onPointerCancelCapture?: PointerEventHandler<HTMLElement>; 
    onPointerDown?: PointerEventHandler<HTMLElement>; 
    onPointerDownCapture?: PointerEventHandler<HTMLElement>; 
    onPointerEnter?: PointerEventHandler<HTMLElement>; 
    onPointerEnterCapture?: PointerEventHandler<HTMLElement>; 
    onPointerLeave?: PointerEventHandler<HTMLElement>; 
    onPointerLeaveCapture?: PointerEventHandler<HTMLElement>; 
    onPointerMove?: PointerEventHandler<HTMLElement>; 
    onPointerMoveCapture?: PointerEventHandler<HTMLElement>; 
    onPointerOut?: PointerEventHandler<HTMLElement>; 
    onPointerOutCapture?: PointerEventHandler<HTMLElement>; 
    onPointerOver?: PointerEventHandler<HTMLElement>; 
    onPointerOverCapture?: PointerEventHandler<HTMLElement>; 
    onPointerUp?: PointerEventHandler<HTMLElement>; 
    onPointerUpCapture?: PointerEventHandler<HTMLElement>; 
    onProgress?: ReactEventHandler<HTMLElement>; 
    onProgressCapture?: ReactEventHandler<HTMLElement>; 
    onRateChange?: ReactEventHandler<HTMLElement>; 
    onRateChangeCapture?: ReactEventHandler<HTMLElement>; 
    onReset?: FormEventHandler<HTMLElement>; 
    onResetCapture?: FormEventHandler<HTMLElement>; 
    onResize?: ReactEventHandler<HTMLElement>; 
    onResizeCapture?: ReactEventHandler<HTMLElement>; 
    onScroll?: UIEventHandler<HTMLElement>; 
    onScrollCapture?: UIEventHandler<HTMLElement>; 
    onSeeked?: ReactEventHandler<HTMLElement>; 
    onSeekedCapture?: ReactEventHandler<HTMLElement>; 
    onSeeking?: ReactEventHandler<HTMLElement>; 
    onSeekingCapture?: ReactEventHandler<HTMLElement>; 
    onSelect?: ReactEventHandler<HTMLElement>; 
    onSelectCapture?: ReactEventHandler<HTMLElement>; 
    onStalled?: ReactEventHandler<HTMLElement>; 
    onStalledCapture?: ReactEventHandler<HTMLElement>; 
    onSubmit?: FormEventHandler<HTMLElement>; 
    onSubmitCapture?: FormEventHandler<HTMLElement>; 
    onSuspend?: ReactEventHandler<HTMLElement>; 
    onSuspendCapture?: ReactEventHandler<HTMLElement>; 
    onTimeUpdate?: ReactEventHandler<HTMLElement>; 
    onTimeUpdateCapture?: ReactEventHandler<HTMLElement>; 
    onTouchCancel?: TouchEventHandler<HTMLElement>; 
    onTouchCancelCapture?: TouchEventHandler<HTMLElement>; 
    onTouchEnd?: TouchEventHandler<HTMLElement>; 
    onTouchEndCapture?: TouchEventHandler<HTMLElement>; 
    onTouchMove?: TouchEventHandler<HTMLElement>; 
    onTouchMoveCapture?: TouchEventHandler<HTMLElement>; 
    onTouchStart?: TouchEventHandler<HTMLElement>; 
    onTouchStartCapture?: TouchEventHandler<HTMLElement>; 
    onTransitionEnd?: TransitionEventHandler<HTMLElement>; 
    onTransitionEndCapture?: TransitionEventHandler<HTMLElement>; 
    onVolumeChange?: ReactEventHandler<HTMLElement>; 
    onVolumeChangeCapture?: ReactEventHandler<HTMLElement>; 
    onWaiting?: ReactEventHandler<HTMLElement>; 
    onWaitingCapture?: ReactEventHandler<HTMLElement>; 
    onWheel?: WheelEventHandler<HTMLElement>; 
    onWheelCapture?: WheelEventHandler<HTMLElement>; 
    open?: boolean; 
    optimum?: number; 
    pattern?: string; 
    placeholder?: string; 
    playsInline?: boolean; 
    poster?: string; 
    prefix?: string; 
    preload?: string; 
    property?: string; 
    radioGroup?: string; 
    readOnly?: boolean; 
    ref?: LegacyRef<HTMLElement>; 
    rel?: string; 
    required?: boolean; 
    resource?: string; 
    results?: number; 
    rev?: string; 
    reversed?: boolean; 
    role?: AriaRole; 
    rowSpan?: number; 
    rows?: number; 
    sandbox?: string; 
    scope?: string; 
    scoped?: boolean; 
    scrolling?: string; 
    seamless?: boolean; 
    security?: string; 
    selected?: boolean; 
    shape?: string; 
    size?: number; 
    sizes?: string; 
    slot?: string; 
    span?: number; 
    spellCheck?: Booleanish; 
    src?: string; 
    srcDoc?: string; 
    srcLang?: string; 
    srcSet?: string; 
    start?: number; 
    step?: string | number; 
    style?: CSSProperties; 
    summary?: string; 
    suppressContentEditableWarning?: boolean; 
    suppressHydrationWarning?: boolean; 
    tabIndex?: number; 
    tag?: keyof IntrinsicElements; 
    target?: string; 
    title?: string; 
    translate?: "yes" | "no"; 
    type?: string; 
    typeof?: string; 
    unselectable?: "on" | "off"; 
    useMap?: string; 
    value?: string | number | readonly string[]; 
    vocab?: string; 
    width?: string | number; 
    wmode?: string; 
    wrap?: string; 
}
Hierarchy
Properties
about?
+ServerSideWrapperProps | Code Documentation
Interface ServerSideWrapperProps
interface ServerSideWrapperProps { 
    about?: string; 
    accept?: string; 
    acceptCharset?: string; 
    accessKey?: string; 
    action?: string | ((formData) => void); 
    allowFullScreen?: boolean; 
    allowTransparency?: boolean; 
    alt?: string; 
    aria-activedescendant?: string; 
    aria-atomic?: Booleanish; 
    aria-autocomplete?: "list" | "none" | "inline" | "both"; 
    aria-braillelabel?: string; 
    aria-brailleroledescription?: string; 
    aria-busy?: Booleanish; 
    aria-checked?: boolean | "true" | "false" | "mixed"; 
    aria-colcount?: number; 
    aria-colindex?: number; 
    aria-colindextext?: string; 
    aria-colspan?: number; 
    aria-controls?: string; 
    aria-current?: boolean | "time" | "page" | "step" | "true" | "false" | "date" | "location"; 
    aria-describedby?: string; 
    aria-description?: string; 
    aria-details?: string; 
    aria-disabled?: Booleanish; 
    aria-dropeffect?: "link" | "none" | "copy" | "execute" | "move" | "popup"; 
    aria-errormessage?: string; 
    aria-expanded?: Booleanish; 
    aria-flowto?: string; 
    aria-grabbed?: Booleanish; 
    aria-haspopup?: boolean | "dialog" | "menu" | "grid" | "listbox" | "tree" | "true" | "false"; 
    aria-hidden?: Booleanish; 
    aria-invalid?: boolean | "true" | "false" | "grammar" | "spelling"; 
    aria-keyshortcuts?: string; 
    aria-label?: string; 
    aria-labelledby?: string; 
    aria-level?: number; 
    aria-live?: "off" | "assertive" | "polite"; 
    aria-modal?: Booleanish; 
    aria-multiline?: Booleanish; 
    aria-multiselectable?: Booleanish; 
    aria-orientation?: "horizontal" | "vertical"; 
    aria-owns?: string; 
    aria-placeholder?: string; 
    aria-posinset?: number; 
    aria-pressed?: boolean | "true" | "false" | "mixed"; 
    aria-readonly?: Booleanish; 
    aria-relevant?: "text" | "all" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals"; 
    aria-required?: Booleanish; 
    aria-roledescription?: string; 
    aria-rowcount?: number; 
    aria-rowindex?: number; 
    aria-rowindextext?: string; 
    aria-rowspan?: number; 
    aria-selected?: Booleanish; 
    aria-setsize?: number; 
    aria-sort?: "none" | "ascending" | "descending" | "other"; 
    aria-valuemax?: number; 
    aria-valuemin?: number; 
    aria-valuenow?: number; 
    aria-valuetext?: string; 
    as?: string; 
    async?: boolean; 
    autoCapitalize?: string; 
    autoComplete?: string; 
    autoCorrect?: string; 
    autoFocus?: boolean; 
    autoPlay?: boolean; 
    autoSave?: string; 
    capture?: boolean | "user" | "environment"; 
    cellPadding?: string | number; 
    cellSpacing?: string | number; 
    challenge?: string; 
    charSet?: string; 
    checked?: boolean; 
    children?: ReactNode; 
    cite?: string; 
    classID?: string; 
    className?: string; 
    colSpan?: number; 
    color?: string; 
    cols?: number; 
    content?: string; 
    contentEditable?: Booleanish | "inherit" | "plaintext-only"; 
    contextMenu?: string; 
    controls?: boolean; 
    coords?: string; 
    crossOrigin?: CrossOrigin; 
    dangerouslySetInnerHTML?: { 
        __html: string | TrustedHTML; 
    }; 
    data?: string; 
    datatype?: string; 
    dateTime?: string; 
    default?: boolean; 
    defaultChecked?: boolean; 
    defaultValue?: string | number | readonly string[]; 
    defer?: boolean; 
    dir?: string; 
    disabled?: boolean; 
    download?: any; 
    draggable?: Booleanish; 
    encType?: string; 
    forcedPages?: ForcedPage[]; 
    form?: string; 
    formAction?: string | ((formData) => void); 
    formEncType?: string; 
    formMethod?: string; 
    formNoValidate?: boolean; 
    formTarget?: string; 
    frameBorder?: string | number; 
    headers?: string; 
    height?: string | number; 
    hidden?: boolean; 
    high?: number; 
    href?: string; 
    hrefLang?: string; 
    htmlFor?: string; 
    httpEquiv?: string; 
    id?: string; 
    inlist?: any; 
    inputMode?: "search" | "text" | "none" | "tel" | "url" | "email" | "numeric" | "decimal"; 
    integrity?: string; 
    is?: string; 
    itemID?: string; 
    itemProp?: string; 
    itemRef?: string; 
    itemScope?: boolean; 
    itemType?: string; 
    key?: null | Key; 
    keyParams?: string; 
    keyType?: string; 
    kind?: string; 
    label?: string; 
    lang?: string; 
    list?: string; 
    loop?: boolean; 
    low?: number; 
    manifest?: string; 
    marginHeight?: number; 
    marginWidth?: number; 
    max?: string | number; 
    maxLength?: number; 
    media?: string; 
    mediaGroup?: string; 
    method?: string; 
    min?: string | number; 
    minLength?: number; 
    multiple?: boolean; 
    muted?: boolean; 
    name?: string; 
    noValidate?: boolean; 
    nonce?: string; 
    onAbort?: ReactEventHandler<HTMLElement>; 
    onAbortCapture?: ReactEventHandler<HTMLElement>; 
    onAnimationEnd?: AnimationEventHandler<HTMLElement>; 
    onAnimationEndCapture?: AnimationEventHandler<HTMLElement>; 
    onAnimationIteration?: AnimationEventHandler<HTMLElement>; 
    onAnimationIterationCapture?: AnimationEventHandler<HTMLElement>; 
    onAnimationStart?: AnimationEventHandler<HTMLElement>; 
    onAnimationStartCapture?: AnimationEventHandler<HTMLElement>; 
    onAuxClick?: MouseEventHandler<HTMLElement>; 
    onAuxClickCapture?: MouseEventHandler<HTMLElement>; 
    onBeforeInput?: FormEventHandler<HTMLElement>; 
    onBeforeInputCapture?: FormEventHandler<HTMLElement>; 
    onBlur?: FocusEventHandler<HTMLElement>; 
    onBlurCapture?: FocusEventHandler<HTMLElement>; 
    onCanPlay?: ReactEventHandler<HTMLElement>; 
    onCanPlayCapture?: ReactEventHandler<HTMLElement>; 
    onCanPlayThrough?: ReactEventHandler<HTMLElement>; 
    onCanPlayThroughCapture?: ReactEventHandler<HTMLElement>; 
    onChange?: FormEventHandler<HTMLElement>; 
    onChangeCapture?: FormEventHandler<HTMLElement>; 
    onClick?: MouseEventHandler<HTMLElement>; 
    onClickCapture?: MouseEventHandler<HTMLElement>; 
    onCompositionEnd?: CompositionEventHandler<HTMLElement>; 
    onCompositionEndCapture?: CompositionEventHandler<HTMLElement>; 
    onCompositionStart?: CompositionEventHandler<HTMLElement>; 
    onCompositionStartCapture?: CompositionEventHandler<HTMLElement>; 
    onCompositionUpdate?: CompositionEventHandler<HTMLElement>; 
    onCompositionUpdateCapture?: CompositionEventHandler<HTMLElement>; 
    onContextMenu?: MouseEventHandler<HTMLElement>; 
    onContextMenuCapture?: MouseEventHandler<HTMLElement>; 
    onCopy?: ClipboardEventHandler<HTMLElement>; 
    onCopyCapture?: ClipboardEventHandler<HTMLElement>; 
    onCut?: ClipboardEventHandler<HTMLElement>; 
    onCutCapture?: ClipboardEventHandler<HTMLElement>; 
    onDoubleClick?: MouseEventHandler<HTMLElement>; 
    onDoubleClickCapture?: MouseEventHandler<HTMLElement>; 
    onDrag?: DragEventHandler<HTMLElement>; 
    onDragCapture?: DragEventHandler<HTMLElement>; 
    onDragEnd?: DragEventHandler<HTMLElement>; 
    onDragEndCapture?: DragEventHandler<HTMLElement>; 
    onDragEnter?: DragEventHandler<HTMLElement>; 
    onDragEnterCapture?: DragEventHandler<HTMLElement>; 
    onDragExit?: DragEventHandler<HTMLElement>; 
    onDragExitCapture?: DragEventHandler<HTMLElement>; 
    onDragLeave?: DragEventHandler<HTMLElement>; 
    onDragLeaveCapture?: DragEventHandler<HTMLElement>; 
    onDragOver?: DragEventHandler<HTMLElement>; 
    onDragOverCapture?: DragEventHandler<HTMLElement>; 
    onDragStart?: DragEventHandler<HTMLElement>; 
    onDragStartCapture?: DragEventHandler<HTMLElement>; 
    onDrop?: DragEventHandler<HTMLElement>; 
    onDropCapture?: DragEventHandler<HTMLElement>; 
    onDurationChange?: ReactEventHandler<HTMLElement>; 
    onDurationChangeCapture?: ReactEventHandler<HTMLElement>; 
    onEmptied?: ReactEventHandler<HTMLElement>; 
    onEmptiedCapture?: ReactEventHandler<HTMLElement>; 
    onEncrypted?: ReactEventHandler<HTMLElement>; 
    onEncryptedCapture?: ReactEventHandler<HTMLElement>; 
    onEnded?: ReactEventHandler<HTMLElement>; 
    onEndedCapture?: ReactEventHandler<HTMLElement>; 
    onError?: ReactEventHandler<HTMLElement>; 
    onErrorCapture?: ReactEventHandler<HTMLElement>; 
    onFocus?: FocusEventHandler<HTMLElement>; 
    onFocusCapture?: FocusEventHandler<HTMLElement>; 
    onGotPointerCapture?: PointerEventHandler<HTMLElement>; 
    onGotPointerCaptureCapture?: PointerEventHandler<HTMLElement>; 
    onInput?: FormEventHandler<HTMLElement>; 
    onInputCapture?: FormEventHandler<HTMLElement>; 
    onInvalid?: FormEventHandler<HTMLElement>; 
    onInvalidCapture?: FormEventHandler<HTMLElement>; 
    onKeyDown?: KeyboardEventHandler<HTMLElement>; 
    onKeyDownCapture?: KeyboardEventHandler<HTMLElement>; 
    onKeyPress?: KeyboardEventHandler<HTMLElement>; 
    onKeyPressCapture?: KeyboardEventHandler<HTMLElement>; 
    onKeyUp?: KeyboardEventHandler<HTMLElement>; 
    onKeyUpCapture?: KeyboardEventHandler<HTMLElement>; 
    onLoad?: ReactEventHandler<HTMLElement>; 
    onLoadCapture?: ReactEventHandler<HTMLElement>; 
    onLoadStart?: ReactEventHandler<HTMLElement>; 
    onLoadStartCapture?: ReactEventHandler<HTMLElement>; 
    onLoadedData?: ReactEventHandler<HTMLElement>; 
    onLoadedDataCapture?: ReactEventHandler<HTMLElement>; 
    onLoadedMetadata?: ReactEventHandler<HTMLElement>; 
    onLoadedMetadataCapture?: ReactEventHandler<HTMLElement>; 
    onLostPointerCapture?: PointerEventHandler<HTMLElement>; 
    onLostPointerCaptureCapture?: PointerEventHandler<HTMLElement>; 
    onMouseDown?: MouseEventHandler<HTMLElement>; 
    onMouseDownCapture?: MouseEventHandler<HTMLElement>; 
    onMouseEnter?: MouseEventHandler<HTMLElement>; 
    onMouseLeave?: MouseEventHandler<HTMLElement>; 
    onMouseMove?: MouseEventHandler<HTMLElement>; 
    onMouseMoveCapture?: MouseEventHandler<HTMLElement>; 
    onMouseOut?: MouseEventHandler<HTMLElement>; 
    onMouseOutCapture?: MouseEventHandler<HTMLElement>; 
    onMouseOver?: MouseEventHandler<HTMLElement>; 
    onMouseOverCapture?: MouseEventHandler<HTMLElement>; 
    onMouseUp?: MouseEventHandler<HTMLElement>; 
    onMouseUpCapture?: MouseEventHandler<HTMLElement>; 
    onPaste?: ClipboardEventHandler<HTMLElement>; 
    onPasteCapture?: ClipboardEventHandler<HTMLElement>; 
    onPause?: ReactEventHandler<HTMLElement>; 
    onPauseCapture?: ReactEventHandler<HTMLElement>; 
    onPlay?: ReactEventHandler<HTMLElement>; 
    onPlayCapture?: ReactEventHandler<HTMLElement>; 
    onPlaying?: ReactEventHandler<HTMLElement>; 
    onPlayingCapture?: ReactEventHandler<HTMLElement>; 
    onPointerCancel?: PointerEventHandler<HTMLElement>; 
    onPointerCancelCapture?: PointerEventHandler<HTMLElement>; 
    onPointerDown?: PointerEventHandler<HTMLElement>; 
    onPointerDownCapture?: PointerEventHandler<HTMLElement>; 
    onPointerEnter?: PointerEventHandler<HTMLElement>; 
    onPointerEnterCapture?: PointerEventHandler<HTMLElement>; 
    onPointerLeave?: PointerEventHandler<HTMLElement>; 
    onPointerLeaveCapture?: PointerEventHandler<HTMLElement>; 
    onPointerMove?: PointerEventHandler<HTMLElement>; 
    onPointerMoveCapture?: PointerEventHandler<HTMLElement>; 
    onPointerOut?: PointerEventHandler<HTMLElement>; 
    onPointerOutCapture?: PointerEventHandler<HTMLElement>; 
    onPointerOver?: PointerEventHandler<HTMLElement>; 
    onPointerOverCapture?: PointerEventHandler<HTMLElement>; 
    onPointerUp?: PointerEventHandler<HTMLElement>; 
    onPointerUpCapture?: PointerEventHandler<HTMLElement>; 
    onProgress?: ReactEventHandler<HTMLElement>; 
    onProgressCapture?: ReactEventHandler<HTMLElement>; 
    onRateChange?: ReactEventHandler<HTMLElement>; 
    onRateChangeCapture?: ReactEventHandler<HTMLElement>; 
    onReset?: FormEventHandler<HTMLElement>; 
    onResetCapture?: FormEventHandler<HTMLElement>; 
    onResize?: ReactEventHandler<HTMLElement>; 
    onResizeCapture?: ReactEventHandler<HTMLElement>; 
    onScroll?: UIEventHandler<HTMLElement>; 
    onScrollCapture?: UIEventHandler<HTMLElement>; 
    onSeeked?: ReactEventHandler<HTMLElement>; 
    onSeekedCapture?: ReactEventHandler<HTMLElement>; 
    onSeeking?: ReactEventHandler<HTMLElement>; 
    onSeekingCapture?: ReactEventHandler<HTMLElement>; 
    onSelect?: ReactEventHandler<HTMLElement>; 
    onSelectCapture?: ReactEventHandler<HTMLElement>; 
    onStalled?: ReactEventHandler<HTMLElement>; 
    onStalledCapture?: ReactEventHandler<HTMLElement>; 
    onSubmit?: FormEventHandler<HTMLElement>; 
    onSubmitCapture?: FormEventHandler<HTMLElement>; 
    onSuspend?: ReactEventHandler<HTMLElement>; 
    onSuspendCapture?: ReactEventHandler<HTMLElement>; 
    onTimeUpdate?: ReactEventHandler<HTMLElement>; 
    onTimeUpdateCapture?: ReactEventHandler<HTMLElement>; 
    onTouchCancel?: TouchEventHandler<HTMLElement>; 
    onTouchCancelCapture?: TouchEventHandler<HTMLElement>; 
    onTouchEnd?: TouchEventHandler<HTMLElement>; 
    onTouchEndCapture?: TouchEventHandler<HTMLElement>; 
    onTouchMove?: TouchEventHandler<HTMLElement>; 
    onTouchMoveCapture?: TouchEventHandler<HTMLElement>; 
    onTouchStart?: TouchEventHandler<HTMLElement>; 
    onTouchStartCapture?: TouchEventHandler<HTMLElement>; 
    onTransitionEnd?: TransitionEventHandler<HTMLElement>; 
    onTransitionEndCapture?: TransitionEventHandler<HTMLElement>; 
    onVolumeChange?: ReactEventHandler<HTMLElement>; 
    onVolumeChangeCapture?: ReactEventHandler<HTMLElement>; 
    onWaiting?: ReactEventHandler<HTMLElement>; 
    onWaitingCapture?: ReactEventHandler<HTMLElement>; 
    onWheel?: WheelEventHandler<HTMLElement>; 
    onWheelCapture?: WheelEventHandler<HTMLElement>; 
    open?: boolean; 
    optimum?: number; 
    pattern?: string; 
    placeholder?: string; 
    playsInline?: boolean; 
    poster?: string; 
    prefix?: string; 
    preload?: string; 
    property?: string; 
    radioGroup?: string; 
    readOnly?: boolean; 
    ref?: LegacyRef<HTMLElement>; 
    rel?: string; 
    required?: boolean; 
    resource?: string; 
    results?: number; 
    rev?: string; 
    reversed?: boolean; 
    role?: AriaRole; 
    rowSpan?: number; 
    rows?: number; 
    sandbox?: string; 
    scope?: string; 
    scoped?: boolean; 
    scrolling?: string; 
    seamless?: boolean; 
    security?: string; 
    selected?: boolean; 
    shape?: string; 
    size?: number; 
    sizes?: string; 
    slot?: string; 
    span?: number; 
    spellCheck?: Booleanish; 
    src?: string; 
    srcDoc?: string; 
    srcLang?: string; 
    srcSet?: string; 
    start?: number; 
    step?: string | number; 
    style?: CSSProperties; 
    summary?: string; 
    suppressContentEditableWarning?: boolean; 
    suppressHydrationWarning?: boolean; 
    tabIndex?: number; 
    tag?: keyof IntrinsicElements; 
    target?: string; 
    title?: string; 
    translate?: "yes" | "no"; 
    type?: string; 
    typeof?: string; 
    unselectable?: "on" | "off"; 
    useMap?: string; 
    value?: string | number | readonly string[]; 
    vocab?: string; 
    width?: string | number; 
    wmode?: string; 
    wrap?: string; 
}
Hierarchy
Properties
about?
 accept?
 acceptCharset?
 accessKey?
@@ -487,10 +487,10 @@
 
See
aria-valuetext.

 
Optional aria-valuetext
aria-valuetext?: string
Defines the human readable text alternative of aria-valuenow for a range widget.

 
Optional as
as?: string
Optional async
async?: boolean
Optional autoCapitalize
autoCapitalize?: string
Non-standard Attributes

-
Optional autoComplete
autoComplete?: string
Optional autoCorrect
autoCorrect?: string
Optional autoFocus
autoFocus?: boolean
Optional autoPlay
autoPlay?: boolean
Optional autoSave
autoSave?: string
Optional capture
capture?: boolean | "user" | "environment"
Optional cellPadding
cellPadding?: string | number
Optional cellSpacing
cellSpacing?: string | number
Optional challenge
challenge?: string
Optional charSet
charSet?: string
Optional checked
checked?: boolean
Optional children
children?: ReactNode
Optional cite
cite?: string
Optional classID
classID?: string
Optional className
className?: string
Optional colSpan
colSpan?: number
Optional color
color?: string
Optional cols
cols?: number
Optional content
content?: string
Optional contentEditable
contentEditable?: Booleanish | "inherit" | "plaintext-only"
Optional contextMenu
contextMenu?: string
Optional controls
controls?: boolean
Optional coords
coords?: string
Optional crossOrigin
crossOrigin?: CrossOrigin
Optional dangerouslySetInnerHTML
dangerouslySetInnerHTML?: { 
    __html: string | TrustedHTML; 
}
Type declaration
  • __html: string | TrustedHTML
    Should be InnerHTML['innerHTML'].
+
Optional autoComplete
autoComplete?: string
Optional autoCorrect
autoCorrect?: string
Optional autoFocus
autoFocus?: boolean
Optional autoPlay
autoPlay?: boolean
Optional autoSave
autoSave?: string
Optional capture
capture?: boolean | "user" | "environment"
Optional cellPadding
cellPadding?: string | number
Optional cellSpacing
cellSpacing?: string | number
Optional challenge
challenge?: string
Optional charSet
charSet?: string
Optional checked
checked?: boolean
Optional children
children?: ReactNode
Optional cite
cite?: string
Optional classID
classID?: string
Optional className
className?: string
Optional colSpan
colSpan?: number
Optional color
color?: string
Optional cols
cols?: number
Optional content
content?: string
Optional contentEditable
contentEditable?: Booleanish | "inherit" | "plaintext-only"
Optional contextMenu
contextMenu?: string
Optional controls
controls?: boolean
Optional coords
coords?: string
Optional crossOrigin
crossOrigin?: CrossOrigin
Optional dangerouslySetInnerHTML
dangerouslySetInnerHTML?: { 
    __html: string | TrustedHTML; 
}
Type declaration
  • __html: string | TrustedHTML
    Should be InnerHTML['innerHTML'].
 But unfortunately we're mixing renderer-specific type declarations.
    
 
Optional data
data?: string
Optional datatype
datatype?: string
Optional dateTime
dateTime?: string
Optional default
default?: boolean
Optional defaultChecked
defaultChecked?: boolean
React-specific Attributes

-
Optional defaultValue
defaultValue?: string | number | readonly string[]
Optional defer
defer?: boolean
Optional dir
dir?: string
Optional disabled
disabled?: boolean
Optional download
download?: any
Optional draggable
draggable?: Booleanish
Optional encType
encType?: string
Optional forcedPages
forcedPages?: ForcedPage[]
Optional form
form?: string
Optional formAction
formAction?: string | ((formData) => void)
Type declaration
    • (formData): void
    • Parameters
      • formData: FormData
      Returns void
Optional formEncType
formEncType?: string
Optional formMethod
formMethod?: string
Optional formNoValidate
formNoValidate?: boolean
Optional formTarget
formTarget?: string
Optional frameBorder
frameBorder?: string | number
Optional headers
headers?: string
Optional height
height?: string | number
Optional hidden
hidden?: boolean
Optional high
high?: number
Optional href
href?: string
Optional hrefLang
hrefLang?: string
Optional htmlFor
htmlFor?: string
Optional httpEquiv
httpEquiv?: string
Optional id
id?: string
Optional inlist
inlist?: any
Optional inputMode
inputMode?: "search" | "text" | "none" | "tel" | "url" | "email" | "numeric" | "decimal"
Hints at the type of data that might be entered by the user while editing the element or its contents

+
Optional defaultValue
defaultValue?: string | number | readonly string[]
Optional defer
defer?: boolean
Optional dir
dir?: string
Optional disabled
disabled?: boolean
Optional download
download?: any
Optional draggable
draggable?: Booleanish
Optional encType
encType?: string
Optional forcedPages
forcedPages?: ForcedPage[]
Optional form
form?: string
Optional formAction
formAction?: string | ((formData) => void)
Type declaration
    • (formData): void
    • Parameters
      • formData: FormData
      Returns void
Optional formEncType
formEncType?: string
Optional formMethod
formMethod?: string
Optional formNoValidate
formNoValidate?: boolean
Optional formTarget
formTarget?: string
Optional frameBorder
frameBorder?: string | number
Optional headers
headers?: string
Optional height
height?: string | number
Optional hidden
hidden?: boolean
Optional high
high?: number
Optional href
href?: string
Optional hrefLang
hrefLang?: string
Optional htmlFor
htmlFor?: string
Optional httpEquiv
httpEquiv?: string
Optional id
id?: string
Optional inlist
inlist?: any
Optional inputMode
inputMode?: "search" | "text" | "none" | "tel" | "url" | "email" | "numeric" | "decimal"
Hints at the type of data that might be entered by the user while editing the element or its contents

 
See
https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute

 
Optional integrity
integrity?: string
Optional is
is?: string
Specify that a standard HTML element should behave like a defined custom built-in element

 
See
https://html.spec.whatwg.org/multipage/custom-elements.html#attr-is

@@ -516,4 +516,4 @@
 
Optional rel
rel?: string
Optional required
required?: boolean
Optional resource
resource?: string
Optional results
results?: number
Optional rev
rev?: string
Optional reversed
reversed?: boolean
Optional role
role?: AriaRole
WAI-ARIA

 
Optional rowSpan
rowSpan?: number
Optional rows
rows?: number
Optional sandbox
sandbox?: string
Optional scope
scope?: string
Optional scoped
scoped?: boolean
Optional scrolling
scrolling?: string
Optional seamless
seamless?: boolean
Optional security
security?: string
Optional selected
selected?: boolean
Optional shape
shape?: string
Optional size
size?: number
Optional sizes
sizes?: string
Optional slot
slot?: string
Optional span
span?: number
Optional spellCheck
spellCheck?: Booleanish
Optional src
src?: string
Optional srcDoc
srcDoc?: string
Optional srcLang
srcLang?: string
Optional srcSet
srcSet?: string
Optional start
start?: number
Optional step
step?: string | number
Optional style
style?: CSSProperties
Optional summary
summary?: string
Optional suppressContentEditableWarning
suppressContentEditableWarning?: boolean
Optional suppressHydrationWarning
suppressHydrationWarning?: boolean
Optional tabIndex
tabIndex?: number
Optional tag
tag?: keyof IntrinsicElements
Default Value
'html'
 

-
Optional target
target?: string
Optional title
title?: string
Optional translate
translate?: "yes" | "no"
Optional type
type?: string
Optional typeof
typeof?: string
Optional unselectable
unselectable?: "on" | "off"
Optional useMap
useMap?: string
Optional value
value?: string | number | readonly string[]
Optional vocab
vocab?: string
Optional width
width?: string | number
Optional wmode
wmode?: string
Optional wrap
wrap?: string
Settings
Member Visibility
Theme
On This Page
Generated using TypeDoc

\ No newline at end of file
+
Optional target
target?: string
Optional title
title?: string
Optional translate
translate?: "yes" | "no"
Optional type
type?: string
Optional typeof
typeof?: string
Optional unselectable
unselectable?: "on" | "off"
Optional useMap
useMap?: string
Optional value
value?: string | number | readonly string[]
Optional vocab
vocab?: string
Optional width
width?: string | number
Optional wmode
wmode?: string
Optional wrap
wrap?: string
Settings
Member Visibility
Theme
On This Page
Generated using TypeDoc

\ No newline at end of file
diff --git a/docs/modules/client_color_switch_color_switch.html b/docs/modules/client_color_switch_color_switch.html
index 1780e811..a4ed0529 100644
--- a/docs/modules/client_color_switch_color_switch.html
+++ b/docs/modules/client_color_switch_color_switch.html
@@ -1,3 +1,3 @@
-client/color-switch/color-switch | Code Documentation
Module client/color-switch/color-switch
Index
Interfaces
ColorSwitchProps
+client/color-switch/color-switch | Code Documentation
Module client/color-switch/color-switch
Index
Interfaces
ColorSwitchProps
 
Functions
ColorSwitch
 
Settings
Member Visibility
Theme
Generated using TypeDoc

\ No newline at end of file
diff --git a/docs/modules/client_force_color_scheme_force_color_scheme.html b/docs/modules/client_force_color_scheme_force_color_scheme.html
index 4b5c9b6c..7318b0a6 100644
--- a/docs/modules/client_force_color_scheme_force_color_scheme.html
+++ b/docs/modules/client_force_color_scheme_force_color_scheme.html
@@ -1,2 +1,2 @@
-client/force-color-scheme/force-color-scheme | Code Documentation
Module client/force-color-scheme/force-color-scheme
Index
Functions
ForceColorScheme
+client/force-color-scheme/force-color-scheme | Code Documentation
Module client/force-color-scheme/force-color-scheme
Index
Functions
ForceColorScheme
 
Settings
Member Visibility
Theme
Generated using TypeDoc

\ No newline at end of file
diff --git a/docs/modules/client_force_theme_force_theme.html b/docs/modules/client_force_theme_force_theme.html
index 468eb5ad..3388abfa 100644
--- a/docs/modules/client_force_theme_force_theme.html
+++ b/docs/modules/client_force_theme_force_theme.html
@@ -1,2 +1,2 @@
-client/force-theme/force-theme | Code Documentation
Module client/force-theme/force-theme
Index
Functions
ForceTheme
+client/force-theme/force-theme | Code Documentation
Module client/force-theme/force-theme
Index
Functions
ForceTheme
 
Settings
Member Visibility
Theme
Generated using TypeDoc

\ No newline at end of file
diff --git a/docs/modules/client_theme_switcher_theme_switcher.html b/docs/modules/client_theme_switcher_theme_switcher.html
index e3043b5a..e1e3c1ac 100644
--- a/docs/modules/client_theme_switcher_theme_switcher.html
+++ b/docs/modules/client_theme_switcher_theme_switcher.html
@@ -1,4 +1,4 @@
-client/theme-switcher/theme-switcher | Code Documentation
Module client/theme-switcher/theme-switcher
Index
Interfaces
ThemeSwitcherProps
+client/theme-switcher/theme-switcher | Code Documentation
Module client/theme-switcher/theme-switcher
Index
Interfaces
ThemeSwitcherProps
 
Functions
ThemeSwitcher
 useThemeSwitcher
 
Settings
Member Visibility
Theme
Generated using TypeDoc

\ No newline at end of file
diff --git a/docs/modules/server_nextjs_server_side_wrapper_server_side_wrapper.html b/docs/modules/server_nextjs_server_side_wrapper_server_side_wrapper.html
index a81b53fb..388efc04 100644
--- a/docs/modules/server_nextjs_server_side_wrapper_server_side_wrapper.html
+++ b/docs/modules/server_nextjs_server_side_wrapper_server_side_wrapper.html
@@ -1,4 +1,4 @@
-server/nextjs/server-side-wrapper/server-side-wrapper | Code Documentation
Module server/nextjs/server-side-wrapper/server-side-wrapper
References
NextJsServerTarget
+server/nextjs/server-side-wrapper/server-side-wrapper | Code Documentation
Module server/nextjs/server-side-wrapper/server-side-wrapper
References
NextJsServerTarget
 
Interfaces
NextJsSSRThemeSwitcherProps
 ServerSideWrapperProps
 
Type Aliases
ForcedPage
diff --git a/docs/modules/store.html b/docs/modules/store.html
index 6f5d3447..055cde78 100644
--- a/docs/modules/store.html
+++ b/docs/modules/store.html
@@ -1,4 +1,4 @@
-store | Code Documentation
Module store
Index
Namespaces
useTheme
+store | Code Documentation
Module store
Index
Namespaces
useTheme
 
Type Aliases
ColorSchemeType
 ThemeStoreType
 
Variables
initialState
diff --git a/docs/modules/store.useTheme.html b/docs/modules/store.useTheme.html
index 7a6bf0e4..c7289ad4 100644
--- a/docs/modules/store.useTheme.html
+++ b/docs/modules/store.useTheme.html
@@ -1,4 +1,4 @@
-useTheme | Code Documentation
Namespace useTheme
Index
Functions
destroy
+useTheme | Code Documentation
Namespace useTheme
Index
Functions
destroy
 getState
 setState
 subscribe
diff --git a/docs/modules/utils.html b/docs/modules/utils.html
index 8482266d..f9450cd4 100644
--- a/docs/modules/utils.html
+++ b/docs/modules/utils.html
@@ -1,2 +1,2 @@
-utils | Code Documentation
Module utils
Index
Functions
resolveThemeFromColorScheme
+utils | Code Documentation
Module utils
Index
Functions
resolveThemeFromColorScheme
 
Settings
Member Visibility
Theme
Generated using TypeDoc

\ No newline at end of file
diff --git a/docs/types/server_nextjs_server_side_wrapper_server_side_wrapper.ForcedPage.html b/docs/types/server_nextjs_server_side_wrapper_server_side_wrapper.ForcedPage.html
index f7496afe..6ea61904 100644
--- a/docs/types/server_nextjs_server_side_wrapper_server_side_wrapper.ForcedPage.html
+++ b/docs/types/server_nextjs_server_side_wrapper_server_side_wrapper.ForcedPage.html
@@ -1 +1 @@
-ForcedPage | Code Documentation
Type alias ForcedPage
ForcedPage: [pathMatcher: RegExp | string, themes: { 
    colorScheme?: ColorSchemeType; 
    theme?: string; 
}]
Settings
Member Visibility
Theme
Generated using TypeDoc

\ No newline at end of file
+ForcedPage | Code Documentation
Type alias ForcedPage
ForcedPage: [pathMatcher: RegExp | string, themes: { 
    colorScheme?: ColorSchemeType; 
    theme?: string; 
}]
Settings
Member Visibility
Theme
Generated using TypeDoc

\ No newline at end of file
diff --git a/docs/types/store.ColorSchemeType.html b/docs/types/store.ColorSchemeType.html
index 97745d73..06d43c9b 100644
--- a/docs/types/store.ColorSchemeType.html
+++ b/docs/types/store.ColorSchemeType.html
@@ -1 +1 @@
-ColorSchemeType | Code Documentation
Type alias ColorSchemeType
ColorSchemeType: "" | "system" | "dark" | "light"
Settings
Member Visibility
Theme
Generated using TypeDoc

\ No newline at end of file
+ColorSchemeType | Code Documentation
Type alias ColorSchemeType
ColorSchemeType: "" | "system" | "dark" | "light"
Settings
Member Visibility
Theme
Generated using TypeDoc

\ No newline at end of file
diff --git a/docs/types/store.ThemeStoreType.html b/docs/types/store.ThemeStoreType.html
index e7c10b8d..5d040cb3 100644
--- a/docs/types/store.ThemeStoreType.html
+++ b/docs/types/store.ThemeStoreType.html
@@ -1 +1 @@
-ThemeStoreType | Code Documentation
Type alias ThemeStoreType
ThemeStoreType: { 
    colorSchemePref: ColorSchemeType; 
    darkTheme: string; 
    forcedColorScheme?: ColorSchemeType; 
    forcedTheme?: string; 
    lightTheme: string; 
    theme: string; 
}
Type declaration
  • colorSchemePref: ColorSchemeType
  • darkTheme: string
  • Optional forcedColorScheme?: ColorSchemeType
  • Optional forcedTheme?: string
  • lightTheme: string
  • theme: string
Settings
Member Visibility
Theme
Generated using TypeDoc

\ No newline at end of file
+ThemeStoreType | Code Documentation
Type alias ThemeStoreType
ThemeStoreType: { 
    colorSchemePref: ColorSchemeType; 
    darkTheme: string; 
    forcedColorScheme?: ColorSchemeType; 
    forcedTheme?: string; 
    lightTheme: string; 
    theme: string; 
}
Type declaration
  • colorSchemePref: ColorSchemeType
  • darkTheme: string
  • Optional forcedColorScheme?: ColorSchemeType
  • Optional forcedTheme?: string
  • lightTheme: string
  • theme: string
Settings
Member Visibility
Theme
Generated using TypeDoc

\ No newline at end of file
diff --git a/docs/variables/store.initialState.html b/docs/variables/store.initialState.html
index 5495c3fa..b53817c2 100644
--- a/docs/variables/store.initialState.html
+++ b/docs/variables/store.initialState.html
@@ -1 +1 @@
-initialState | Code Documentation
Variable initialStateConst 
initialState: ThemeStoreType = ...
Settings
Member Visibility
Theme
Generated using TypeDoc

\ No newline at end of file
+initialState | Code Documentation
Variable initialStateConst 
initialState: ThemeStoreType = ...
Settings
Member Visibility
Theme
Generated using TypeDoc

\ No newline at end of file
diff --git a/packages/nextjs-themes/src/server/nextjs/server-side-wrapper/server-side-wrapper.tsx b/packages/nextjs-themes/src/server/nextjs/server-side-wrapper/server-side-wrapper.tsx
index dd0630eb..fcf4fde7 100644
--- a/packages/nextjs-themes/src/server/nextjs/server-side-wrapper/server-side-wrapper.tsx
+++ b/packages/nextjs-themes/src/server/nextjs/server-side-wrapper/server-side-wrapper.tsx
@@ -42,6 +42,12 @@ function sharedServerComponentRenderer(
   );
 }
 
+/**
+ * @example
+ * ```tsx
+ * 
+ * ```
+ */
 export function NextJsSSGThemeSwitcher(props: NextJsSSRThemeSwitcherProps) {
   return sharedServerComponentRenderer(props, "div");
 }
@@ -53,8 +59,18 @@ export interface ServerSideWrapperProps extends NextJsSSRThemeSwitcherProps {
   /** @defaultValue 'html' */
   tag?: keyof JSX.IntrinsicElements;
 }
+
 /**
  * Server side wrapper for Next.js to replace `html` tag
+ * @example
+ * ```tsx
+ * 
+ *  
+ *    
+ *    {children}
+ *  
+ * 
+ * ```
  */
 export function ServerSideWrapper(props: ServerSideWrapperProps) {
   return sharedServerComponentRenderer(props, "html");