Gathering detailed insights and metrics for @preact-hooks/unistore
Installations
npm install @preact-hooks/unistoreDeveloper Guide
BETA
Typescript
Yes
Module System
CommonJS
Min. Node Version
>= 8
Node Version
13.12.0
NPM Version
6.14.1
Score
65.8
Supply Chain
90.2
Quality
75.9
Maintenance
100
Vulnerability
100
License
Releases
Unable to fetch releases
Contributors
1
Unable to fetch Contributors
Languages
1
JavaScript
JavaScript (100%)
Developer
mihar-22
Download Statistics
Total Downloads
11,115
Last Day
11
Last Week
33
Last Month
71
Last Year
1,138
GitHub Statistics
32 Stars
38 Commits
1 Forks
5 Watching
1 Branches
1 Contributors
Bundle Size
1.47 kB
Minified
758.00 B
Minified + Gzipped
Maintainers
1
Package Meta Information
Latest Version
1.1.2
Package Id
@preact-hooks/unistore@1.1.2
Unpacked Size
15.70 kB
Size
5.95 kB
File Count
10
NPM Version
6.14.1
Node Version
13.12.0
Total Downloads
Cumulative downloads
Total Downloads
11,115
Last day
0%
11
Compared to previous day
Last week
560%
33
Compared to previous week
Last month
-62%
71
Compared to previous month
Last year
-43.4%
1,138
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Versions
Preact Hooks - Unistore
Inspired by react-redux and redux-zero
A custom Preact hook to wire up components to Unistore.
Table of Contents
Installation
This package has Preact 10+ and Unistore 3.4+ as peer dependencies.
npm install @preact-hooks/unistore or yarn add @preact-hooks/unistore
You can also load it via the unpkg CDN
https://unpkg.com/@preact-hooks/unistore will download the latest UMD bundle.
Docs
Setup
To get started wrap your app in a Provider component to make the store available
throughout the entire component tree.
1import { StoreProvider } from '@preact-hooks/unistore' 2 3import createStore from 'unistore'; 4import devtools from 'unistore/devtools'; 5 6const initialStore = {} 7 8const store = (process.env.NODE_ENV === 'production') 9 ? createStore(initialStore) 10 : devtools(createStore(initialStore)) 11 12function App() { 13 return ( 14 <StoreProvider value={store}> 15 // ... 16 </StoreProvider> 17 ) 18}
🎉 Now you are ready to start using the hooks listed below in your function components.
useStore
1const store = useStore()
This hook returns a reference to the same Unistore store that was passed into the StoreProvider component.
This hook should probably not be used frequently. Prefer useSelector as your primary choice. However, this may be useful for less common scenarios that do require access to the store.
1import { useStore } from '@preact-hooks/unistore' 2 3function MyComponent() { 4 const store = useStore() 5 6 // ... 7}
useSelector
1// You can pass in a selector function such as (s) => s.prop 2// Or, you can pass in a string such as 'foo,bar' which will return { foo, bar } 3const result = useSelector(selector, equalityFn?)
To learn about this hook checkout the amazing docs over at React Redux.
Pay attention to:
There is a convenient equality function called shallowEqual included. You can use this with
the useSelector hook if you require it. If you're not sure when you'd need this then click
on the link above titled "Equality Comparisons and Updates".
1import shallowEqual from '@preact-hooks/unistore/shallowEqual' 2 3function MyComponent() { 4 const result = useSelector(selectorFn, shallowEqual) 5 6 // ... 7}
You could also use something like the Lodash _.isEqual() utility or
Immutable.js's comparison capabilities. It's up to you how the equality check is performed.
You can also checkout Reselect which is a "selector" library for Redux.
useAction
1const action = useAction(actionFn)
This hook is used to create Unistore actions. The function passed into the hook is identical to how you would create an action for Unistore, they receive the current state and return a state update.
1import { useAction } from '@preact-hooks/unistore' 2 3import { h } from 'preact' 4 5function Counter() { 6 const increment = useAction(({ count }) => ({ count: count + 1 })); 7 8 return (<button onClick={increment}>Click me</button>); 9}
If your actions are defined in another file then just import it and pass it through.
1// ... 2 3import { increment } from 'myActionsFile.js' 4 5function Counter() { 6 const increment = useAction(increment); 7 8 // ... 9}
LICENSE
No vulnerabilities found.
Reason
no binaries found in the repo
Reason
0 existing vulnerabilities detected
Reason
license file detected
Details
- Info: project has a license file: LICENSE:0
- Info: FSF or OSI recognized license: MIT License: LICENSE:0
Reason
Found 0/28 approved changesets -- score normalized to 0
Reason
project is archived
Details
- Warn: Repository is archived.
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
- Warn: no security policy file detected
- Warn: no security file to analyze
- Warn: no security file to analyze
- Warn: no security file to analyze
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
branch protection not enabled on development/release branches
Details
- Warn: branch protection not enabled for branch 'master'
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
- Warn: 0 commits out of 2 are checked with a SAST tool
Score
3
/10
Last Scanned on 2025-01-06
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More