Working With React Context

Context providers in React provide a way to store data in the root of a component tree (such as in a board) so that the components have access to it without passing props.
This is an example where the Board field in the board file provides React context values to the ExampleComponent component in the component file with the React context. 
1
2
3
4
5
6
7
8
9
10
11
12
import React from "react";
// React context & component code
const MyContext1 = React.createContext(null);
const MyContext2 = React.createContext(null);
export const ExampleComponent = () => {
  const contextValue1 = React.useContext(MyContext1);
  const contextValue2 = React.useContext(MyContext2);
  return (
    <div>
      {contextValue1} {contextValue2}
    </div>
  );};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
// .board.tsx code file
import { createBoard } from "@wixc3/react-board";
export default createBoard({
  name: "My Board",
  Board: () => {
    return (
      <MyContext1.Provider value={"context 1"}>
        <MyContext2.Provider value={"context 2"}>
          <ExampleComponent />
        </MyContext2.Provider>
      </MyContext1.Provider>
    );
  },
});
Previous article
Next article