How To Use React's Context Api Outside Of React's Component Scope : Reactjs
I am using react's context API for storing USER_TOKEN for authentication purposes. Also I am maintaining a common fetch function in a separate module where I want to use this USER
Solution 1:
- create a folder named: Context in the src/components folder
- in this folder that you have created (Context ) create a file named index.js
- in the index.js file write:
importReact, { Component } from'react';
constAppContext = React.createContext();
exportclassProviderextendsComponent {
state = {
token: ''
};
setToken = (token) => {
this.state.token = token;
this.setState();
};
render() {
return (
<AppContext.Providervalue = {{token:this.state.token,
actions: {
setToken:this.setToken
}
}}>
{this.props.children}
</AppContext.Provider>
);
}
}
exoprt constConsumer = AppContext.Consumer;
exportconstAppContextObject = AppContext;
- in the src/index.js:
importReactfrom'react';
importReactDOM from'react-dom';
import { Provider } from"./compomemts/Context/";
importAppfrom'./App';
ReactDOM.render(
<Provider><App /></Provider>
, document.getElementById("root")
);
- let's say you have login component, in it write down:
importReact, { PureComponent } from'react';
import { Consumer, AppContextObject } from"../Context";
classLoginextendsPureComponent {
render() {
return (
<Consumer>
{(actions, token) => (
<buttonclassName="enter"id="enter-id"onClick={(event) => {
if(token === undifined) {
newToken = 'get the token from your system';
actions.setToken(newToken);
}
}} >
connect
</button>
)}
</Consumer>
)
}
}
Login.contextType = AppContextObject; // This part is important to access context values
SuperAdminContextObject
Post a Comment for "How To Use React's Context Api Outside Of React's Component Scope : Reactjs"