React context

// ---------------- Parent.js 
import {createContext , useState} from "react";

let contextName = createContext( ) // you can optionally pass it a default value // it returns a "provider" object 

let Parent = () => {
    let [count , setCount] = useState()    // returns an [ state variable , state setter fn]. you can pass useState() a default value too
    				// the stateSetter function is async
    return ( 
        <div> 
            <contextName.Provider value={ {count , setCount } } >	// you can send multiple things across to the consumers by adding them in a single object
                <B/>
            </contextName.Provider> 
        </div>
    )
}

export {contextName};
export default Parent;


// file that consumes the context 
// --------- Child.js -----------

import {useContext} from "react";   // import the useContext hook that will allow you to actually use the created and imported context 
import {contextName } from "./Parent";   // import the particular context that you want to use 

let Child = () => {
    let value = useContext(contextName);
    return (
        <div> {value} </div>
    )
}

Source: grepper.com

React context

//React context allows us to pass data to our component tree without using props.
To use Context, we use the createContext function from React.
The created context includes a Provider and a Consumer property, which are each components.
We wrap the Provider around the component tree that we want to pass
the given value down.
Next, we place the Consumer in the component we want to consume the value.
import { createContext } from 'react';

const NameContext = createContext('');

function App() {
  return (
    <NameContext.Provider value="John Doe">
      <Body />
    <NameContext.Provider>
  );
} 

function Body() {
  return <Greeting />;
} 

function Greeting() {
  return (
    <NameContext.Consumer>
      {name => <h1>Welcome, {name}</h1>}
    //we got function with name argument which we will use
    </NameContext.Consumer>
  );
}

//using useContext hook 
 rewrite our example from earlier, using the useContext hook:

import { createContext, useContext } from 'react';

const NameContext = createContext('');

function App() {
  return (
    <NameContext.Provider value="John Doe">
      <Body />
    <NameContext.Provider>
  );
} 

function Body() {
  return <Greeting />;
} 

function Greeting() {
	const name = useContext(NameContext);
  //useContext with name of context
  return (
    <h1>Welcome, {name}</h1>
  );
}

Source: freecodecamp.org

Create a context in react

import React, { createContext, useReducer } from "react";
import reducer, { initialState } from "./reducer";

export let todoContext = createContext({});

export default function Provider({ children }) {

  const [state, dispatch] = useReducer(reducer, initialState);

  const values = {
    state,
    dispatch
  };

  return (
    <>
      <todoContext.Provider value={values}>
        {children}
      </todoContext.Provider>
    </>
  );
}

Source: codementor.io

React create context

import React from "react";
export const ThemeContext = React.createContext();

export default class Theme extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            mode: "dark",
            toggleMode: this.toggleMode
        }
    }
    toggleMode = () => {
        console.log('yes');
        this.setState({
            mode: this.state.mode === 'dark' ? 'light' : 'dark'
        });
    }
    render() {
        return (
            <ThemeContext.Provider value={this.state} >
                {this.props.children}
            </ThemeContext.Provider>
        )
    }
}

Source: grepper.com

Similar codes

0 vote146 views1 answer
Get started with datagrid in react js
Javascript React
0 vote144 views1 answer
Using RN BootSplash with React Navigation
Javascript React
0 vote144 views1 answer
External js doesn't works if revisit the page in react
Javascript React
0 vote146 views3 answers
Image border shadow react native
Javascript React
1 vote138 views1 answer
Reactjs compile subdomine
Javascript React
0 vote157 views1 answer
How to get css property of div after rendering in react js
Javascript React
2 votes141 views1 answer
Path.split is not a function react hook use form
Javascript React
1 vote151 views1 answer
How to paste in android emulator react nativ etext input
Javascript React
0 vote171 views1 answer
How disabled react-select
Javascript React
0 vote134 views1 answer
React '$' is not define
Javascript React