Created
November 5, 2018 18:44
-
-
Save daniloraisi/6f76691c7f1d3d67f73a8506d34858f8 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
[%bs.raw {|require("bootstrap/dist/css/bootstrap.min.css")|}]; | |
type complex = { | |
value: string, | |
className: string | |
}; | |
module BtnColorContext = | |
Context.MakePair({ | |
type t = complex; | |
let defaultValue = {value: "Hello", className: "btn btn-danger"} | |
}); | |
module ThemedButton = { | |
let component = "ThemedButton" |> ReasonReact.statelessComponent; | |
let make = _children => { | |
...component, | |
render: _self => | |
<BtnColorContext.Consumer> | |
...{context => | |
<button className={context.className}> | |
{ReasonReact.stringToElement(context.value)} | |
</button>} | |
</BtnColorContext.Consumer> | |
}; | |
}; | |
module Button = { | |
let component = "Button" |> ReasonReact.statelessComponent; | |
let make = _children => { | |
...component, | |
render: _self => | |
<div className="container"> | |
<ThemedButton /> | |
</div>, | |
}; | |
}; | |
let component = "App" |> ReasonReact.statelessComponent; | |
let make = _children => { | |
let value = {value: "Hello", className: "btn btn-info"}; | |
{ | |
...component, | |
render: _self => | |
<BtnColorContext.Provider value> | |
<Button /> | |
</BtnColorContext.Provider> | |
} | |
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 | |
); | |
}; | |
}; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment