Installations
npm install state-pool
Developer Guide
Typescript
Yes
Module System
CommonJS, ESM
Node Version
18.18.0
NPM Version
10.1.0
Score
75.4
Supply Chain
99.6
Quality
76.7
Maintenance
100
Vulnerability
100
License
Releases
Contributors
Unable to fetch Contributors
Languages
TypeScript (82.71%)
JavaScript (13.25%)
CSS (3.21%)
MDX (0.83%)
Developer
Download Statistics
Total Downloads
317,775
Last Day
51
Last Week
1,622
Last Month
13,560
Last Year
145,362
GitHub Statistics
142 Stars
319 Commits
17 Forks
4 Watching
15 Branches
3 Contributors
Bundle Size
22.68 kB
Minified
6.88 kB
Minified + Gzipped
Package Meta Information
Latest Version
0.10.1
Package Id
state-pool@0.10.1
Unpacked Size
71.89 kB
Size
10.45 kB
File Count
27
NPM Version
10.1.0
Node Version
18.18.0
Publised On
02 Feb 2024
Total Downloads
Cumulative downloads
Total Downloads
317,775
Last day
-89.3%
51
Compared to previous day
Last week
-30.6%
1,622
Compared to previous week
Last month
-23.1%
13,560
Compared to previous month
Last year
28%
145,362
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
State Pool
Transform your React app with our state management library! Declare global and local states like variables, powered by the magic of React hooks 🪄✨
Features & Advantages
- Simple, familiar, flexible and very minimal core API but powerful
- Built-in support for state persistence
- Very easy to learn because its API is very similar to react state hook's API
- Support selecting deeply nested state
- Support creating state dynamically
- Can be used outside react components
- Doesn't wrap your app in context providers
- Very organized API, You can do almost everything with a single import
Want to see how this library is making all that possible?
Check out the full documentation at yezyilomo.github.io/state-pool
You can also try live examples Here
How it Works
-
Create a state
-
Subscribe a component(s) to the state created
-
If a component wants to update the state, it sends update request
-
When a state receives update request, it performs the update and send signal to all components subscribed to it for them to update themselves(re-render)
Installation
1npm install state-pool
Or
1yarn add state-pool
Getting Started
Using state-pool to manage state is very simple, all you need to do is
- Create and initialize a state by using
createState
- Use your state in your component through
useState
hooks
These two steps summarises pretty much everything you need to use state-pool.
Below are few examples showing how to use state-pool to manage states.
1// Example 1. 2import React from 'react'; 3import { createState } from 'state-pool'; 4 5 6const count = createState(0); // Create "count" state and initialize it with 0 7 8 9function ClicksCounter(props){ 10 // Use "count" state 11 const [count, setCount] = count.useState(); 12 13 const incrementCount = (e) => { 14 setCount(count+1) 15 } 16 17 return ( 18 <div> 19 Count: {count} 20 <br/> 21 <button onClick={incrementCount}>Click</button> 22 </div> 23 ); 24} 25 26ReactDOM.render(ClicksCounter, document.querySelector("#root"));
The other way to do it is using useState
from state-pool
1// Example 2. 2import React from 'react'; 3import { createState, useState } from 'state-pool'; 4 5 6const count = createState(0); // Create "count" state and initialize it with 0 7 8 9function ClicksCounter(props){ 10 // Use "count" state 11 const [count, setCount] = useState(count); 12 13 const incrementCount = (e) => { 14 setCount(count+1) 15 } 16 17 return ( 18 <div> 19 Count: {count} 20 <br/> 21 <button onClick={incrementCount}>Click</button> 22 </div> 23 ); 24} 25 26ReactDOM.render(ClicksCounter, document.querySelector("#root"));
What about local state?
With state-pool, state are just like variables, if declared on a global scope, it’s a global state and if declared on local scope it’s a local state, so the difference between global state and local state in state-pool lies where you declare them just like variables.
Here is an example for managing local state
1// Example 1. 2import React from 'react'; 3import { useState } from 'state-pool'; 4 5 6function ClicksCounter(props){ 7 // Here `useState` hook will create "count" state and initialize it with 0 8 // Note: the `useState` hook used here is impored from state-pool and not react 9 const [count, setCount] = useState(0); 10 11 const incrementCount = (e) => { 12 setCount(count+1) 13 } 14 15 return ( 16 <div> 17 Count: {count} 18 <br/> 19 <button onClick={incrementCount}>Click</button> 20 </div> 21 ); 22} 23 24ReactDOM.render(ClicksCounter, document.querySelector("#root"));
If you don't want state-pool's useState
to collide with React's useState
you can import StatePool
and use the hook from there,
Here is an example
1// Example 2. 2import React from 'react'; 3import StatePool from 'state-pool'; 4 5 6function ClicksCounter(props){ 7 // Here `useState` hook will create "count" state and initialize it with 0 8 const [count, setCount] = StatePool.useState(0); 9 10 const incrementCount = (e) => { 11 setCount(count+1) 12 } 13 14 return ( 15 <div> 16 Count: {count} 17 <br/> 18 <button onClick={incrementCount}>Click</button> 19 </div> 20 ); 21} 22 23ReactDOM.render(ClicksCounter, document.querySelector("#root"));
Isn't StatePool.useState
the same thing as React.useState
?
Definitely. not!...
Both can be used to manage local state, and that's where the similarity ends. StatePool.useState
offers more features, for one it offers a simple way to update nested data unlike React.useState
, it's also flexible as it's used to manage both global state and local state. So you could say React.useState
is a subset of StatePool.useState
.
Here is an example of StatePool.useState
in action, updating nested data
1// Example 2.
2import React from 'react';
3import StatePool from 'state-pool';
4
5
6const user = StatePool.createState({name: "Yezy", age: 25});
7
8function UserInfo(props){
9 const [user, setUser, updateUser] = StatePool.useState(user);
10
11 const updateName = (e) => {
12 updateUser(user => {
13 user.name = e.target.value;
14 });
15 }
16
17 return (
18 <div>
19 Name: {user.name}
20 <br/>
21 <input type="text" value={user.name} onChange={updateName}/>
22 </div>
23 );
24}
25
26ReactDOM.render(UserInfo, document.querySelector("#root"));
With React.useState
you would need to recreate user
object when updating user.name
, but with StatePool.useState
you don't need that, you just update the value right away.
That's one advantage of using StatePool.useState
but there are many more, you'll learn when going through documentation📝.
Store based example
If you have many states and you would like to organize them into a store, state-pool allows you to do that too and provides a tone of features on top of it.
Here are steps for managing state with a store
- Create a store(which is basically a container for your state)
- Create and initialize a state by using
store.setState
- Use your state in your component through
store.useState
hooks
These three steps summarises pretty much everything you need to manage state with a store.
Below are few examples of store in action
1// Example 1. 2import { createStore } from 'state-pool'; 3 4 5const store = createStore(); // Create store for storing our state 6store.setState("count", 0); // Create "count" state and add it to the store 7 8function ClicksCounter(props){ 9 // Use "count" state 10 const [count, setCount] = store.useState("count"); 11 12 return ( 13 <div> 14 Count: {count} 15 <br/> 16 <button onClick={e => setCount(++count)}>Click</button> 17 </div> 18 ); 19}
1// Example 2. 2import { createStore } from 'state-pool'; 3 4 5// Instead of using createStore and store.setState, 6// you can combine store creation and initialization as follows 7 8const store = createStore({"user", {name: "Yezy", age: 25}}); // create store and initialize it with user 9 10function UserInfo(props){ 11 const [user, setUser, updateUser] = store.useState("user"); 12 13 const updateName = (e) => { 14 updateUser(user => { 15 user.name = e.target.value; 16 }); 17 } 18 19 return ( 20 <div> 21 Name: {user.name} 22 <br/> 23 <input type="text" value={user.name} onChange={updateName}/> 24 </div> 25 ); 26}
State-pool doesn't enforce storing your states in a store, If you don't like using the architecture of store you can still use state-pool without it. In state-pool, store is just a container for states, so you can still use your states without it, in fact state-pool doesn’t care where you store your states as long as you can access them you're good to go.
Pretty cool, right?
Documentation 📝
Full documentation for this project is available at yezyilomo.github.io/state-pool, you are advised to read it inorder to utilize this library to the fullest. You can also try live examples here.
Running Tests
If you've forked this library and you want to run tests use the following command
1npm test
No vulnerabilities found.
Reason
no dangerous workflow patterns detected
Reason
no binaries found in the repo
Reason
license file detected
Details
- Info: project has a license file: LICENSE:0
- Info: FSF or OSI recognized license: MIT License: LICENSE:0
Reason
dependency not pinned by hash detected -- score normalized to 3
Details
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/node.js.yml:23: update your workflow using https://app.stepsecurity.io/secureworkflow/yezyilomo/state-pool/node.js.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/node.js.yml:25: update your workflow using https://app.stepsecurity.io/secureworkflow/yezyilomo/state-pool/node.js.yml/master?enable=pin
- Info: 0 out of 2 GitHub-owned GitHubAction dependencies pinned
- Info: 1 out of 1 npmCommand dependencies pinned
Reason
detected GitHub workflow tokens with excessive permissions
Details
- Warn: no topLevel permission defined: .github/workflows/node.js.yml:1
- Info: no jobLevel write permissions found
Reason
Found 1/12 approved changesets -- score normalized to 0
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
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 30 are checked with a SAST tool
Reason
35 existing vulnerabilities detected
Details
- Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
- Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
- Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
- Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
- Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
- Warn: Project is vulnerable to: GHSA-j8xg-fqg3-53r7
- Warn: Project is vulnerable to: GHSA-c2jc-4fpr-4vhg
- Warn: Project is vulnerable to: GHSA-wf5p-g6vw-rhxx
- Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7
- Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x
- Warn: Project is vulnerable to: GHSA-mf6x-hrgr-658f
- Warn: Project is vulnerable to: GHSA-xrh7-m5pp-39r6
- Warn: Project is vulnerable to: GHSA-rv95-896h-c2vc
- Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx
- Warn: Project is vulnerable to: GHSA-jchw-25xp-jwwc
- Warn: Project is vulnerable to: GHSA-cxjh-pqwp-8mfp
- Warn: Project is vulnerable to: GHSA-pfrx-2q88-qq97
- Warn: Project is vulnerable to: GHSA-rc47-6667-2j5j
- Warn: Project is vulnerable to: GHSA-c7qv-q95q-8v27
- Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h
- Warn: Project is vulnerable to: GHSA-3rfm-jhwj-7488
- Warn: Project is vulnerable to: GHSA-hhq3-ff78-jv3g
- Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3
- Warn: Project is vulnerable to: GHSA-mwcw-c2x4-8c55
- Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j
- Warn: Project is vulnerable to: GHSA-rhx6-c78j-4q9w
- Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j
- Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg
- Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p
- Warn: Project is vulnerable to: GHSA-w5p7-h5w8-2hfq
- Warn: Project is vulnerable to: GHSA-fhg7-m89q-25r3
- Warn: Project is vulnerable to: GHSA-hc6q-2mpp-qw7j
- Warn: Project is vulnerable to: GHSA-4vvj-4cpr-p986
- Warn: Project is vulnerable to: GHSA-wr3j-pwj9-hqq6
- Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q
Score
2.7
/10
Last Scanned on 2024-12-16
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 MoreOther packages similar to state-pool
react-state-pool
This is a simple library to manage state in react applications. To avoid messing up state management, it aims to tackle only one issue is making global data become global state with a minimum number of APIs. All APIs are very easy to start with. <br/>
@tracer-protocol/pool-state-helper
Tracer's Perpetual Pools peripheral utility contract
mst-reference-pool
MobX-State-Tree extension to create reference pools
iobroker.ico-cloud
ICO Poolsensor allow to monitor the state of the water in your pool and recommends actions to take.