A stateful search input that notifies its parent onblur or on the enter key

SearchInput.re

type state = string;

type action =
  | SetValue(string);

let component = ReasonReact.reducerComponent("SearchInput");

let valueFromEvent = (evt) =>
  ReactDOMRe.domElementToObj(ReactEventRe.Form.target(evt))##value;

let make = (~value, ~onChange, _children) => {
  ...component,

  initialState: () => value,

  reducer: (action, _state) => switch action {
  | SetValue(str) => Update(str)
  },

  render: self =>
    <div className="huey-search">
      <i className="huey-search-icon material-icons">{ReasonReact.string("search")}</i>
      <input
        className="huey-search-input"
        onChange={e => self.send(SetValue(valueFromEvent(e)))}
        onBlur={_e => onChange(self.state)}
        onKeyDown={e => if (ReactEventRe.Keyboard.which(e) == 13) onChange(self.state)}
        _type="search"
        value=self.state
      />
    </div>
};

/**
 * Usage:
 * <SearchInput value="Foo" onChange={str => alert(str)} />
 */