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.