An Interest In:
Web News this Week
- April 20, 2024
- April 19, 2024
- April 18, 2024
- April 17, 2024
- April 16, 2024
- April 15, 2024
- April 14, 2024
July 16, 2021 05:28 pm GMT
To use the context value use
Original Link: https://dev.to/harshdand/react-context-simplifier-3f4n
React Context Simplifier
To simplify the react context api usage and reduce unnecessary renders I have created context-simplifier library. Adding usage details and example below. Feedback, feature requests, bugs can be raised here https://github.com/Harshdand/context-simplifier
Install
npm install --save context-simplifier
yarn add context-simplifier
Usage
To create new context
Use createContextProvider
to create new context. It will return the provider for the created context
import React, { Component } from 'react'import { createContextProvider } from 'context-simplifier'const App = () => { const CountProvider = createContextProvider('count', 0) return ( <> <CountProvider> <Counter /> <Layout> <CountDisplay /> </Layout> </CountProvider> </> )}
To use the context value use getContextValue
import React from 'react'import { getContextValue } from 'context-simplifier'const CountDisplay = () => { const count = getContextValue('count') return <div>{count}</div>}export default CountDisplay
To get the setter for updating the context value
Use getContextAction
to get the setter function which can be used to update the context value
import React from 'react'import { getContextAction } from 'context-simplifier'const Counter = () => { const setCount = getContextAction('count') const increment = () => { setCount((oldValue) => oldValue + 1) } const decrement = () => { setCount((oldValue) => oldValue - 1) } return ( <> <button onClick={increment}>Increment</button> <button onClick={decrement}>Decrement</button> </> )}export default Counter
API
createContextProvider(contextName, initialValue, reducerFunction)
provider
Creates a context and returns the provider.
Param | Type | Description |
---|---|---|
contextName | string:required | Context name must be string without any spaces or special characters. Examples: count, countContext |
initialValue | any:optional | Initial Value for the context |
reducerFunction | function:optional | Reducer function to update context value. Reducer function will receive two params state and action |
getContextValue(contextName)
contextValue
Creates a context and returns the provider.
Param | Type | Description |
---|---|---|
contextName | string:required | Provide the context name to fetch its value |
getContextAction(contextName)
contextSetterFunction
Creates a context and returns the provider.
Param | Type | Description |
---|---|---|
contextName | string:required | Provide the context name to get its setter function |
License
MIT Harshdand
Original Link: https://dev.to/harshdand/react-context-simplifier-3f4n
Share this article:
Tweet
View Full Article
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To