reason-epitath's Introduction

bs-epitath demo

Read the article https://medium.com/astrocoders/render-props-composition-for-reasonml-is-here-b9c004ca9fcb

Running

npm install

npm start

module StateConfig = {
  type state = string;
};
/* ReContainers is from https://github.com/Astrocoders/recontainers/ */
module State = ReContainers.WithState.Make(StateConfig);

let component = ReasonReact.statelessComponent("App");

let make = _children => {
  ...component,
  render: _self => {
    let%Epitath emailState = children =>
      <State initialState=""> ...children </State>;

    <div>
      <h1> {ReasonReact.string("Meet Epitath")} </h1>
      <label> {ReasonReact.string("Email")} </label>
      <input
        onChange={
          event =>
            emailState.send(Set(ReactEvent.Form.target(event)##value))
        }
      />
      <p> {ReasonReact.string(emailState.state)} </p>
      {
        /* Combine as many as you want. Use even in the middle of JSX! */

        let%Epitath passwordState = children =>
          <State initialState=""> ...children </State>;

        <>
          <label> {ReasonReact.string("Password")} </label>
          <input
            onChange={
              event =>
                passwordState.send(
                  Set(ReactEvent.Form.target(event)##value),
                )
            }
          />
          <p> {ReasonReact.string(passwordState.state)} </p>
        </>;
      }
    </div>;
  },
};

Next Steps

Maybe change

let%Epitath passwordState = children =>
  <State initialState=""> ...children </State>;

let%Epitath passwordState = <State initialState="" />;

reason-epitath's People

Contributors

Stargazers

Watchers

reason-epitath's Issues

Remove explicit "children" passing

In the "Next steps" section of the Readme you mention changing the usage to

let%Epitath passwordState = <State initialState="" />;

which removes the explicit handling of children. Do you have a working method of doing this?
The closest I've been able to get is:

module Epitath = {
  let let_ = (children, render) => ReasonReact.element(children(render));
}

//Usage
let%Epitath passwordState = State.make(~initialState="");

This is still an improvement to me, but I like your suggestion better because it is more obvious that we are creating a React component. I just don't see how to define let_ to allow it.

Recommend Projects