RepositoryCurrent collected state Current
Observed since 20 Oct, 21:49 UTC
No superseded metadata states collected. Unchanged observations do not create new revisions.
Back to packageRELEASE DETAILS
0.0.6
npm@-ft/mode-react
React wrapper for theme mode manager
Published10 Sept 2023
Direct dependencies3
Transitive dependenciesNot calculated
README
Current package documentationmode-react - Theme mode manager wrapper for React
React wrapper of dark/light theme mode manager for web
Usage
- Generate
mode.jsusing@-ft/mode-codegenpackage.
{
"variableName": "__theme_mode"
}
- Load
mode.jsBEFORE load react app.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- ./mode.js is generated by @-ft/mode-codegen package -->
<script src="./mode.js"></script>
<script type="module" src="./index.tsx"></script>
</head>
</html>
- Then wrap your app with
ModeContextProvider
import { ModeContextProvider, ModeContext } from '@-ft/mode-react';
function Provider({ children }) {
return (
<ModeContextProvider variableName="__theme_mode">
{children}
</ModeContextProvider>
);
}
function ModeBar() {
const { mode, setMode } = useContext(ModeContext);
return (
<Bar>
Current theme mode is {mode}.
<Select
onChange={useCallback((mode) => setMode(mode), [setMode])}
>
{['system', 'light', 'dark']}
</Select>
</Bar>
)
}
Downloads & popularity
Awaiting observationsNo metric observations yet
Download counts and popularity will appear here as the collector receives them.
Declared dependencies 3
Native requirements3 direct targetsNot calculated transitive count
| Package / target | Requirement | Relationship |
|---|---|---|
@-ft/modeEnvironment{
"local_name": "@-ft/mode",
"alias": false,
"peer_metadata": null
} | ^0.0.5 | runtime |
@-ft/use-persistEnvironment{
"local_name": "@-ft/use-persist",
"alias": false,
"peer_metadata": null
} | ^0.0.1 | runtime |
reactEnvironment{
"local_name": "react",
"alias": false,
"peer_metadata": null
} | ^18.2.0 | peer |
Distribution files
1 collectedDistribution 1
Source fileSource distribution
Checksums from source
{
"integrity": "sha512-IB5dVLHEqp/ek+pVUXkSFHF96IH2RCGOhEuOLaYDvK10LIDqCXEWWCMcQVbIHNhttJOxbLGg2eju1iayS26ysA==",
"shasum": "ccc72ec5e938239c95de27c8910e5c7be3614a2e",
"tarball": "https://registry.npmjs.org/@-ft/mode-react/-/mode-react-0.0.6.tgz",
"fileCount": 4,
"unpackedSize": 3289,
"signatures": [
{
"keyid": "SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA",
"sig": "MEYCIQDKCL+Ztw44jMFOkJ4K4RNzsZFl1TA45vvR3NgPwmJpiwIhAP52VnkMgJcrgewnWJU/PNIbs9LP6a8GIF7/uGZOZ43k"
}
]
}Repository
PENDINGRepository
ACCESSIBLE42ts/-ft-mode-react
Shared repository data · GitHub
- License detected in repository
- Not collected
- Last push
- 17 Apr 2024
- Archived
- No
- Contributor identities
- — · partial collection
Public sponsor counts have not been collected. These signals belong to the repository owner.
Downloads & popularity
0count
Gauge · observed snapshots21 Oct 2026
10.50
21 Oct21 Oct
github · 1 observations shown. Missing days are unknown.
View observed values
| Date / source period | Value | Observed at |
|---|---|---|
| 2026-10-21 | 0 | 2026-10-21T14:07:21.1121250Z |
Metadata history
Meaningful changesRecord identity
package_version:bdc3605ae7c2ec99cb95c3f6b85cee1c43d8680d94f9db47c0c5dfe61401c3a4