Skip to content

Instantly share code, notes, and snippets.

@jaredly jaredly/App.re
Last active Jan 29, 2019

Embed
What would you like to do?
ReasonReact Context API Example
module StringContext =
Context.MakePair({
type t = string;
let defaultValue = "Awesome";
});
let component = ReasonReact.statelessComponent("Tree");
let make = _children => {
...component,
render: _self =>
<StringContext.Provider value="Hello folks">
<div>
<StringContext.Consumer>
...{text => str(text)}
</StringContext.Consumer>
</div>
</StringContext.Provider>,
};
type pair;
[@bs.get] external provider: pair => ReasonReact.reactClass = "Provider";
[@bs.get] external consumer: pair => ReasonReact.reactClass = "Consumer";
[@bs.module "React"] external createContext: 'a => pair = "";
module MakePair = (Config: {
type t;
let defaultValue: t;
}) => {
let _pair = createContext(Config.defaultValue);
module Provider = {
let make = (~value: Config.t, children) =>
ReasonReact.wrapJsForReason(
~reactClass=provider(_pair),
~props={"value": value},
children,
);
};
module Consumer = {
let make = (children: (Config.t) => ReasonReact.reactElement) =>
ReasonReact.wrapJsForReason(
~reactClass=consumer(_pair),
~props=Js.Obj.empty(),
children
)
};
};
@KidkArolis

This comment has been minimized.

Copy link

commented Sep 8, 2018

I get this error:

image

@gaelduplessix

This comment has been minimized.

Copy link

commented Nov 11, 2018

Context.re:7 should probably be [@bs.module "react"], otherwise it seems react is loaded twice. Might be a webpack issue though.

Here's the warning I get:

There are multiple modules with names that only differ in casing.
This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.