diff --git a/README.md b/README.md index e31438f..5bf2264 100644 --- a/README.md +++ b/README.md @@ -10,7 +10,7 @@ smart people at [Hashrocket](http://hashrocket.com/). For a steady stream of TILs from a variety of rocketeers, checkout [til.hashrocket.com](https://til.hashrocket.com/). -_703 TILs and counting..._ +_704 TILs and counting..._ --- @@ -523,6 +523,7 @@ _703 TILs and counting..._ - [Stream A File Line By Line](reason/stream-a-file-line-by-line.md) - [String Interpolation With Integers And Sprintf](reason/string-interpolation-with-integers-and-sprintf.md) - [String Interpolation With Quoted Strings](reason/string-interpolation-with-quoted-strings.md) +- [Wrapping A Component For Use In JavaScript](reason/wrapping-a-component-for-use-in-javascript.md) ### Ruby diff --git a/reason/wrapping-a-component-for-use-in-javascript.md b/reason/wrapping-a-component-for-use-in-javascript.md new file mode 100644 index 0000000..3db7478 --- /dev/null +++ b/reason/wrapping-a-component-for-use-in-javascript.md @@ -0,0 +1,46 @@ +# Wrapping A Component For Use In JavaScript + +Consider the following +[ReasonReact](https://reasonml.github.io/reason-react/en) component for +displaying a greeting. + +```reason +let component = ReasonReact.statelessComponent("Hello"); + +let make = (~name, _children) => { + ...component, + render: _self => +
{ReasonReact.string("Hello, ")} {ReasonReact.string(name)}
, +}; +``` + +If we will just be using this component in a ReasonML context, then that is +all we need. + +If we want this component available for use in a JavaScript file, we have a +little more work to do. We need to define the shape of the component's props +using a bucklescript directive and then wrap the component so that it gets +appropriate exported for a JavaScript context. + +Here is what that looks like. + +```reason +[@bs.deriving abstract] +type jsProps = {name: string}; + +let default = + ReasonReact.wrapReasonForJs(~component, jsProps => + make(~name=jsProps->nameGet, [||]) + ); +``` + +Our only prop is `name` which is a `string`. The `wrapReasonForJs` function +and accompanying binding to `default` mean that we can import the compiled +JS-equivalent like so: + +```javascript +import Hello from 'src/components/Hello.bs.js'; +``` + +See the [docs](https://reasonml.github.io/reason-react/docs/en/interop) for +more details on Reason/JS interop.