-
-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
0 parents
commit e2f73fb
Showing
11 changed files
with
395 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,12 @@ | ||
# These are supported funding model platforms | ||
|
||
github: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2] | ||
patreon: # Replace with a single Patreon username | ||
open_collective: # Replace with a single Open Collective username | ||
ko_fi: aromalanil | ||
tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel | ||
community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry | ||
liberapay: # Replace with a single Liberapay username | ||
issuehunt: # Replace with a single IssueHunt username | ||
otechie: # Replace with a single Otechie username | ||
custom: ['https://paypal.me/aromalanil','https://www.buymeacoffee.com/aromalanil'] |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,30 @@ | ||
--- | ||
name: Bug report | ||
about: "\U0001F41E Found a bug? Report it here." | ||
title: '' | ||
labels: bug | ||
assignees: '' | ||
|
||
--- | ||
|
||
**Short Title** | ||
Give a short title for the issue | ||
|
||
**Describe the bug** | ||
A clear and concise description of what the bug is. | ||
|
||
**To Reproduce** | ||
Steps to reproduce the behavior: | ||
1. Go to '...' | ||
2. Click on '....' | ||
3. Scroll down to '....' | ||
4. See an error | ||
|
||
**Expected behavior** | ||
A clear and concise description of what you expected to happen. | ||
|
||
**Screenshots** | ||
If applicable, add screenshots to help explain your problem. | ||
|
||
**Additional context** | ||
Add any other context about the problem here. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,2 @@ | ||
node_modules | ||
dist |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
tsconfig.json | ||
src | ||
.github |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,15 @@ | ||
{ | ||
"printWidth": 100, | ||
"tabWidth": 2, | ||
"singleQuote": true, | ||
"trailingComma": "all", | ||
"bracketSpacing": true, | ||
"jsxBracketSameLine": true, | ||
"parser": "flow", | ||
"semi": true, | ||
"useTabs": false, | ||
"quoteProps": "as-needed", | ||
"jsxSingleQuote": true, | ||
"arrowParens": "always", | ||
"endOfLine": "lf" | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,70 @@ | ||
# 🦏 React Rhino | ||
|
||
React Rhino is a simple yet powerful state management library for [React](https://http://reactjs.org/) | ||
|
||
## Installation | ||
|
||
```bash | ||
# If you use npm: | ||
npm install react-rhino | ||
|
||
# Or if you use Yarn: | ||
yarn add react-rhino | ||
``` | ||
|
||
## Usage | ||
|
||
### Step 1 | ||
1. Create a `states.js` file in your `src` folder | ||
2. Import `createRhinoState` from `react-rhino` | ||
|
||
```js | ||
import createRhinoState from 'react-rhino' | ||
``` | ||
|
||
3. Pass an object to the `createRhinoState` function where the keys uniquely identify the state and values will be the initial value of the corresponding state. | ||
|
||
```js | ||
const { RhinoProvider, useRhinoState } = createRhinoState({ | ||
name: "John Doe", | ||
isLoggedIn: true | ||
}) | ||
``` | ||
4. `export` the `RhinoProvider` and `useRhinoState` from the file | ||
|
||
```js | ||
export { RhinoProvider, useRhinoState } | ||
``` | ||
|
||
### Step 2 | ||
1. Import the `RhinoProvider` from the file and wrap the `App` component with it. | ||
|
||
```js | ||
import { RhinoProvider } from './states.js` | ||
import App from "./App"; | ||
const rootElement = document.getElementById("root"); | ||
ReactDOM.render( | ||
<RootProvider> | ||
<App /> | ||
</RootProvider>, | ||
rootElement | ||
); | ||
``` | ||
### Step 3 | ||
1. Import `useRhinoState` from the `states.js` to whichever component you want to use your global state. | ||
```js | ||
import { useRhinoState } from './states.js` | ||
``` | ||
2. `useRhinoState` shares similar syntax with `useState` function. The only difference is that you pass a key to the hook instead of the initial value. | ||
```js | ||
const [name,setName] = useRhinoState("name") | ||
``` | ||
|
||
> Note: Here "name" is the key identifying the state in the object we passed to `createRhinoState` function. | ||
|
||
|
||
## Author | ||
[Aromal Anil](https://aromalanil.tech) |
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,34 @@ | ||
{ | ||
"name": "react-rhino", | ||
"version": "1.0.0", | ||
"description": "A simple state management library using React context", | ||
"main": "dist/index.js", | ||
"types": "dist/index.d.ts", | ||
"scripts": { | ||
"build": "tsc" | ||
}, | ||
"repository": { | ||
"type": "git", | ||
"url": "git+https://github.com/aromalanil/react-rhino.git" | ||
}, | ||
"keywords": [ | ||
"react-state", | ||
"state-management", | ||
"react-state-management", | ||
"react-rhino", | ||
"rhino" | ||
], | ||
"author": "Aromal Anil <[email protected]> (https://aromalanil.tech)", | ||
"bugs": { | ||
"url": "https://github.com/aromalanil/react-rhino/issues" | ||
}, | ||
"homepage": "https://github.com/aromalanil/react-rhino#readme", | ||
"license": "MIT", | ||
"devDependencies": { | ||
"typescript": "^4.2.2" | ||
}, | ||
"dependencies": { | ||
"@types/react": "^17.0.2", | ||
"react": "^17.0.1" | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,51 @@ | ||
import * as React from 'react'; | ||
import { createContext, useContext, useState } from 'react'; | ||
|
||
export interface ProviderProps { | ||
children: React.ReactChildren | React.ReactChild; | ||
} | ||
|
||
/** | ||
* | ||
* Function to create a global state using React Context API, | ||
* which returns the ContextProvider and hooks to get the | ||
* state and updater function | ||
* | ||
* @param initialValue Initial value of the state | ||
*/ | ||
function createSingleRhinoState<T>(initialValue: T) { | ||
//Creating Context for state value & state updater function | ||
const ValueContext = React.createContext(initialValue); | ||
const UpdaterContext = createContext<React.Dispatch<React.SetStateAction<T>>>(() => null); | ||
|
||
/** | ||
* | ||
* React hook which returns the stateful value | ||
* @return Global State | ||
*/ | ||
const useStateValue = () => useContext(ValueContext); | ||
|
||
/** | ||
* | ||
* React hook which returns a function to update the global state | ||
* @return Global state updater function | ||
*/ | ||
const useStateUpdate = () => useContext(UpdaterContext); | ||
|
||
/** | ||
* | ||
* Provider Component which makes the state available to all the nested components | ||
*/ | ||
const Provider = ({ children }: ProviderProps) => { | ||
const [state, setState] = useState(initialValue); | ||
|
||
return ( | ||
<ValueContext.Provider value={state}> | ||
<UpdaterContext.Provider value={setState}>{children}</UpdaterContext.Provider> | ||
</ValueContext.Provider> | ||
); | ||
}; | ||
|
||
return { Provider, useStateValue, useStateUpdate }; | ||
} | ||
export default createSingleRhinoState; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,106 @@ | ||
import * as React from 'react'; | ||
import createSingleRhinoState, { ProviderProps } from './create-single-rhino-state'; | ||
|
||
interface StateObject { | ||
[key: string]: any | (() => any); | ||
} | ||
|
||
interface StateList<T> { | ||
provider: ({ children }: ProviderProps) => JSX.Element; | ||
stateHook: () => T; | ||
updaterHook: () => React.Dispatch<React.SetStateAction<T>>; | ||
} | ||
|
||
/** | ||
* | ||
* Function to creates global state using rhino | ||
* @param globalStatesObject An Object containing all the global states to be created | ||
* @example <caption>Sample Use of createRhinoState</caption> | ||
* const { Provider, useRhinoState }=createRhinoState({user:"John Doe",isLoggedIn:true}); | ||
*/ | ||
const createRhinoState = (globalStatesObject: StateObject) => { | ||
const stateListData: { [key: string]: StateList<any> } = {}; | ||
|
||
Object.keys(globalStatesObject).forEach((key) => { | ||
const initialValue = globalStatesObject[key]; | ||
const { Provider, useStateValue, useStateUpdate } = createSingleRhinoState(initialValue); | ||
|
||
stateListData[key] = { | ||
provider: Provider, | ||
stateHook: useStateValue, | ||
updaterHook: useStateUpdate, | ||
}; | ||
}); | ||
|
||
/** | ||
* | ||
* Provider Component which makes the states available to all the nested components | ||
*/ | ||
const RhinoProvider = ({ children }: ProviderProps) => { | ||
const stateList = Object.values(stateListData); | ||
const listLength = stateList.length; | ||
|
||
let RootProvider = ({ children }: ProviderProps) => <>{children}</>; | ||
|
||
for (let i = 0; i < listLength; i++) { | ||
const Provider = stateList[i].provider; | ||
const OldRootProvider = RootProvider; | ||
RootProvider = ({ children }) => ( | ||
<OldRootProvider> | ||
<Provider>{children}</Provider> | ||
</OldRootProvider> | ||
); | ||
} | ||
return <RootProvider>{children}</RootProvider>; | ||
}; | ||
|
||
/** | ||
* | ||
* React hook which returns the stateful value | ||
* corresponding to the key provided | ||
* @param key Key which represents the state | ||
*/ | ||
const useRhinoValue = <T extends unknown>(key: string): T => { | ||
if (key in stateListData) { | ||
return stateListData[key].stateHook(); | ||
} else { | ||
throw new Error(`${key} is an invalid key`); | ||
} | ||
}; | ||
|
||
/** | ||
* | ||
* React hook which returns a function to update the global state | ||
* corresponding to the key provided | ||
* @param key Key which represents the state | ||
*/ | ||
const useSetRhinoState = <T extends unknown>( | ||
key: string, | ||
): React.Dispatch<React.SetStateAction<T>> => { | ||
if (key in stateListData) { | ||
return stateListData[key].updaterHook(); | ||
} else { | ||
throw new Error(`${key} is an invalid key`); | ||
} | ||
}; | ||
|
||
/** | ||
* | ||
* React hook which returns the stateful value corresponding to the key | ||
* provided and a function to update it | ||
* @param key Key which represents the state | ||
*/ | ||
const useRhinoState = <T extends unknown>( | ||
key: string, | ||
): [T, React.Dispatch<React.SetStateAction<T>>] => { | ||
if (key in stateListData) { | ||
return [useRhinoValue(key), useSetRhinoState(key)]; | ||
} else { | ||
throw new Error(`${key} is an invalid key`); | ||
} | ||
}; | ||
|
||
return { RhinoProvider, useRhinoState, useRhinoValue, useSetRhinoState }; | ||
}; | ||
|
||
export default createRhinoState; |
Oops, something went wrong.