How to use reason-react - 10 common examples

To help you get started, we’ve selected a few reason-react examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github emjun / tea-lang / reason / src / Component1.bs.js View on Github external
// Generated by BUCKLESCRIPT VERSION 4.0.8, PLEASE EDIT WITH CARE
'use strict';

var Curry = require("bs-platform/lib/js/curry.js");
var React = require("react");
var ReasonReact = require("reason-react/src/ReasonReact.js");

var component = ReasonReact.statelessComponent("Component1");

function handleClick(_event, _self) {
  console.log("clicked!");
  return /* () */0;
}

function make(message, _children) {
  return /* record */[
          /* debugName */component[/* debugName */0],
          /* reactClassInternal */component[/* reactClassInternal */1],
          /* handedOffState */component[/* handedOffState */2],
          /* willReceiveProps */component[/* willReceiveProps */3],
          /* didMount */component[/* didMount */4],
          /* didUpdate */component[/* didUpdate */5],
          /* willUnmount */component[/* willUnmount */6],
          /* willUpdate */component[/* willUpdate */7],
github OneGraph / onegraph-examples / spotify-app / src / App.bs.js View on Github external
32
            ]),
        /* :: */[
          Emotion.marginBottom(/* `px */[
                25096,
                64
              ]),
          /* :: */[
            Emotion.fontWeight(200),
            /* [] */0
          ]
        ]
      ]
    ]);

var component = ReasonReact.reducerComponent("App");

function make(_children) {
  return /* record */[
          /* debugName */component[/* debugName */0],
          /* reactClassInternal */component[/* reactClassInternal */1],
          /* handedOffState */component[/* handedOffState */2],
          /* willReceiveProps */component[/* willReceiveProps */3],
          /* didMount */(function (self) {
              self[/* state */1][/* auth */1].isLoggedIn("spotify").then((function (loginStatus) {
                        console.log(loginStatus);
                        Curry._1(self[/* send */3], /* SetLogInStatus */[loginStatus]);
                        return Promise.resolve(/* () */0);
                      })).catch((function (err) {
                      return Promise.resolve((console.log(err), /* () */0));
                    }));
              return /* () */0;
github phated / mxdbmobile / src / card / Battle.js View on Github external
/* render */(function () {
              var cardImage = ReasonReact.element(/* None */0, /* None */0, CardImage$Mxdbmobile.make(image, thumbnail, /* array */[]));
              var cardDetails = ReasonReact.element(/* None */0, /* None */0, View$BsReactNative.make(/* None */0, /* None */0, /* None */0, /* None */0, /* None */0, /* None */0, /* None */0, /* None */0, /* None */0, /* Some */[details], /* None */0, /* None */0, /* None */0, /* None */0, /* None */0, /* None */0, /* None */0, /* None */0, /* None */0, /* None */0)(/* array */[
                        ReasonReact.element(/* None */0, /* None */0, Text$BsReactNative.make(/* None */0, /* None */0, /* None */0, /* None */0, /* None */0, /* None */0, /* None */0, /* None */0, /* None */0, /* Some */[title], /* None */0, /* None */0, /* None */0, /* None */0, /* None */0, /* None */0, /* None */0, /* array */[title$1])),
                        ReasonReact.element(/* None */0, /* None */0, Effect$Mxdbmobile.make(effect, /* array */[]))
                      ]));
              var cardStats = ReasonReact.element(/* None */0, /* None */0, View$BsReactNative.make(/* None */0, /* None */0, /* None */0, /* None */0, /* None */0, /* None */0, /* None */0, /* None */0, /* None */0, /* Some */[stats], /* None */0, /* None */0, /* None */0, /* None */0, /* None */0, /* None */0, /* None */0, /* None */0, /* None */0, /* None */0)(/* array */[
                        ReasonReact.element(/* None */0, /* None */0, MP$Mxdbmobile.make(mp, /* array */[])),
                        ReasonReact.element(/* None */0, /* None */0, BattleStat$Mxdbmobile.make(stat, /* array */[]))
                      ]));
              return ReasonReact.element(/* None */0, /* None */0, View$BsReactNative.make(/* None */0, /* None */0, /* None */0, /* None */0, /* None */0, /* None */0, /* None */0, /* None */0, /* None */0, /* Some */[cardListItem], /* None */0, /* None */0, /* None */0, /* None */0, /* None */0, /* None */0, /* None */0, /* None */0, /* None */0, /* None */0)(/* array */[
                              cardImage,
                              cardDetails,
                              cardStats
                            ]));
            }),
          /* initialState */component[/* initialState */10],
github phated / mxdbmobile / src / card / Battle.js View on Github external
/* render */(function () {
              var cardImage = ReasonReact.element(/* None */0, /* None */0, CardImage$Mxdbmobile.make(image, thumbnail, /* array */[]));
              var cardDetails = ReasonReact.element(/* None */0, /* None */0, View$BsReactNative.make(/* None */0, /* None */0, /* None */0, /* None */0, /* None */0, /* None */0, /* None */0, /* None */0, /* None */0, /* Some */[details], /* None */0, /* None */0, /* None */0, /* None */0, /* None */0, /* None */0, /* None */0, /* None */0, /* None */0, /* None */0)(/* array */[
                        ReasonReact.element(/* None */0, /* None */0, Text$BsReactNative.make(/* None */0, /* None */0, /* None */0, /* None */0, /* None */0, /* None */0, /* None */0, /* None */0, /* None */0, /* Some */[title], /* None */0, /* None */0, /* None */0, /* None */0, /* None */0, /* None */0, /* None */0, /* array */[title$1])),
                        ReasonReact.element(/* None */0, /* None */0, Effect$Mxdbmobile.make(effect, /* array */[]))
                      ]));
              var cardStats = ReasonReact.element(/* None */0, /* None */0, View$BsReactNative.make(/* None */0, /* None */0, /* None */0, /* None */0, /* None */0, /* None */0, /* None */0, /* None */0, /* None */0, /* Some */[stats], /* None */0, /* None */0, /* None */0, /* None */0, /* None */0, /* None */0, /* None */0, /* None */0, /* None */0, /* None */0)(/* array */[
                        ReasonReact.element(/* None */0, /* None */0, MP$Mxdbmobile.make(mp, /* array */[])),
                        ReasonReact.element(/* None */0, /* None */0, BattleStat$Mxdbmobile.make(stat, /* array */[]))
                      ]));
              return ReasonReact.element(/* None */0, /* None */0, View$BsReactNative.make(/* None */0, /* None */0, /* None */0, /* None */0, /* None */0, /* None */0, /* None */0, /* None */0, /* None */0, /* Some */[cardListItem], /* None */0, /* None */0, /* None */0, /* None */0, /* None */0, /* None */0, /* None */0, /* None */0, /* None */0, /* None */0)(/* array */[
                              cardImage,
                              cardDetails,
                              cardStats
                            ]));
            }),
          /* initialState */component[/* initialState */10],
github OneGraph / onegraph-examples / spotify-app / src / GetUsername.bs.js View on Github external
/* render */(function (self) {
              return ReasonReact.element(undefined, undefined, Curry.app(GetUserNameQuery[/* make */3], [
                              undefined,
                              undefined,
                              undefined,
                              undefined,
                              undefined,
                              undefined,
                              undefined,
                              undefined,
                              undefined,
                              (function (param) {
                                  var result = param[/* result */0];
                                  if (typeof result === "number") {
                                    return React.createElement("div", undefined, "Loading");
                                  } else if (result.tag) {
                                    var match = result[0].me.spotify;
                                    if (match !== undefined) {
github OneGraph / onegraph-examples / spotify-app / src / Index.bs.js View on Github external
// Generated by BUCKLESCRIPT VERSION 4.0.18, PLEASE EDIT WITH CARE
'use strict';

var ReactDOMRe = require("reason-react/src/ReactDOMRe.js");
var ReasonReact = require("reason-react/src/ReasonReact.js");
var ApolloProvider = require("reason-apollo/src/ApolloProvider.bs.js");
var App$ReactTemplate = require("./App.bs.js");
var Client$ReactTemplate = require("./Client.bs.js");

ReactDOMRe.renderToElementWithId(ReasonReact.element(undefined, undefined, ApolloProvider.make(Client$ReactTemplate.instance, /* array */[ReasonReact.element(undefined, undefined, App$ReactTemplate.make(/* array */[]))])), "root");

/*  Not a pure module */
github rebench / rebench.github.io / src / index.bs.js View on Github external
'use strict';

var App = require("./view/App.bs.js");
var Curry = require("bs-platform/lib/js/curry.js");
var Store = require("./services/Store.bs.js");
var ReactDOMRe = require("reason-react/src/ReactDOMRe.js");
var ReasonReact = require("reason-react/src/ReasonReact.js");

ReactDOMRe.renderToElementWithId(ReasonReact.element(/* None */0, /* None */0, Curry._1(Store.make, (function (data, url, updateStore) {
                return ReasonReact.element(/* None */0, /* None */0, App.make(data, url, updateStore, /* array */[]));
              }))), "index");

/*  Not a pure module */
github emjun / tea-lang / reason / src / Index.bs.js View on Github external
// Generated by BUCKLESCRIPT VERSION 4.0.8, PLEASE EDIT WITH CARE
'use strict';

var ReactDOMRe = require("reason-react/src/ReactDOMRe.js");
var ReasonReact = require("reason-react/src/ReasonReact.js");
var Component1$ReactTemplate = require("./Component1.bs.js");
var Component2$ReactTemplate = require("./Component2.bs.js");

ReactDOMRe.renderToElementWithId(ReasonReact.element(undefined, undefined, Component1$ReactTemplate.make("Hello! Click this text.", /* array */[])), "index1");

ReactDOMRe.renderToElementWithId(ReasonReact.element(undefined, undefined, Component2$ReactTemplate.make("Hello!", /* array */[])), "index2");

/*  Not a pure module */
github rebench / rebench.github.io / src / view / SetupBlock.bs.js View on Github external
return ReasonReact.element(/* None */0, /* None */0, Curry._3(SyntaxChecker[/* make */1], code, 100, (function (param) {
                                return ReasonReact.element(/* None */0, /* None */0, Block_.make(/* `Text */[
                                                936573133,
                                                "Setup"
                                              ], /* None */0, /* None */0, param[0], /* Some */[true], /* array */[ReasonReact.element(/* None */0, /* None */0, Editor.make(code, /* RE */18355, /* None */0, /* Some */[param[1]], /* None */0, /* None */0, /* Some */[onChange], /* array */[]))]));
                              })));
            }),
github voteamerica / voteamerica.github.io / webpack / components / Riders.bs.js View on Github external
}), "button button--large", "refreshRidersListButton", handleGetRiderListClick, /* array */["Refresh List"])), match ? React.createElement("span", {
                                style: downloadLinkButtonSpanStyle
                              }, ReasonReact.element(undefined, undefined, LeftPaddedButton$VoteUSReason.make((function (prim, prim$1, prim$2) {
                                          return {
                                                  className: prim,
                                                  id: prim$1,
                                                  onClick: prim$2
                                                };
                                        }), "button button--large", "hideRidersListDownloadLinkButton", handleHideRidersListDownloadLinkClick, /* array */["Hide Download Link"])), React.createElement("a", {
                                    className: "button button--large",
                                    style: downloadLinkAnchorStyle,
                                    download: loginInfo.details.username + " - riders - backup.json",
                                    href: ridersInfo.urlDownloadBlob
                                  }, "Download backup")) : React.createElement("span", {
                                style: downloadLinkButtonSpanStyle
                              }, ReasonReact.element(undefined, undefined, LeftPaddedButton$VoteUSReason.make((function (prim, prim$1, prim$2) {
                                          return {
                                                  className: prim,
                                                  id: prim$1,
                                                  onClick: prim$2
                                                };
                                        }), "button button--large", "showRidersListDownloadLinkButton", handleShowRidersListDownloadLinkClick, /* array */["Show Download Link"])))), React.createElement("div", undefined, React.createElement("div", {
                              className: "form-group checkbox",
                              style: checkboxAreaStyle
                            }, React.createElement("label", {
                                  className: "",
                                  style: checkboxLabelStyle,
                                  htmlFor: "hideExpired"
                                }, "Hide Expired/Cancelled"), React.createElement("input", {
                                  className: "",
                                  id: "hideExpired",
                                  checked: ridersInfo.hideExpiredCanceled,