Docs / ReasonReact / ContextMixins

Context & Mixins

Context

In order to use React's context, you need to create two things: 1. The context itself 2. A context provider component.

RE
/** ContextProvider.re */ let themeContext = React.createContext("light"); let makeProps = (~value, ~children, ()) => { "value": value, "children": children, }; let make = React.Context.provider(themeContext);

That will give you a ContextProvider component you can use in your application later on. You'll do this like you'd normally would in any React application.

RE
/** App.re */ [@react.component] let make = () => <div> <ContextProvider value="light"> <ComponentToConsumeTheContext /> </ContextProvider> </div>

Also, you can consume the context by using the React.useContext hook

RE
/** ComponentToConsumeTheContext.re */ [@react.component] let make = () => { let theme = React.useContext(ContextProvider.themeContext); <h1>theme->React.string</h1> }

Mixins

ReasonReact doesn't support ReactJS mixins. Composing normal functions is a good alternative.