@jsiebern/bs-material-ui

Important: Version 1.0.0

I have changed the bindings version to 1.0.0 to reflect the fact that there probably won't be any structural / breaking changes in the future to come. This is mostly due to the introduction of @material-ui/styles.

The bindings now include all icons, as well as an (almost) fully typed theme support as well.

Please make sure to look at the changelog for the breaking changes!

I hope that I haven't forgotten any breaking changes in my list, please open an issue should you come across any.

Reason bindings for material-ui

This library provides Reason bindings for material-ui. It's automatically generated by reason-mui-binding-generator.

Installation (for your Reason project)

Run:

yarn add @jsiebern/bs-material-ui

to add the library to your project dependencies. And add @jsiebern/bs-material-ui to the bs-dependencies node of your bsconfig.json.

Installation of the withStyles code extension (ppx)

Install the package: yarn add --dev @jsiebern/bs-material-ui-ppx.

(The PPX builds on the fly using bsb-native. This is a quite heavy dependency and takes a while but will ensure that the PPX runs on your system)

Add the entry ./node_modules/@jsiebern/bs-material-ui-ppx/ppx to the ppx-flags node of your bsconfig.json.

Example

Please see the examples folder. (Running the example code: yarn examples)

withStyles

In material-ui, the withStyles HOC takes care of turning React styles into CSS via react-jss. It passes a classes prop onto the component with the first level keys of the style object passed on.

HOC do not translate well into Reason which is why we are using a render prop to make things easier. (More information on the topic).

withStyles Example PPX (typesafe)

Make sure you have implemented the ppx file (see installation for reference)

Important: In order to use theme => styles you need to provide a <MaterialUi_ThemeProvider theme={MaterialUi_Theme.create()}> at the top of the tree!

The code extension allows you to write a typesafe styled component with ease. It follows the format [%mui.withStyles "ComponentName"({ className: ReactDOMRe.Style.t })]. The generated Component has a render function which passes on a record with the class keys. See the example below.

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

[%mui.withStyles
  "StyledExample"({
    alignRight:
      ReactDOMRe.Style.make(~width="100%", ~textAlign="right", ()),
  })
];

let make = _children => {
  ...component,
  render: _self =>
    <StyledExample>
      ...{
        classes =>
          <div className={classes.alignRight}>
            "Example text - aligned to the right"->ReasonReact.string
          </div>
      }
    </StyledExample>,
};

withStyles Example (unsafe)

You need to pass a classes prop of type list( { name: string, styles: ReactDOMRe.Style.t } ) and a render function to the component. See the following example:

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

let make = _children => {
  ...component,
  render: _self =>
    <MaterialUi.WithStyles
      classes=[
        {
          name: "alignRight",
          styles:
            ReactDOMRe.Style.make(~width="100%", ~textAlign="right", ()),
        },
      ]
      render={
        classes =>
          <div className=classes##alignRight>
            "Example text - aligned to the right"->ReasonReact.string
          </div>
      }
    />,
};

Colors

All Colors are accessible in Submodules of the Module Colors. Color keys that are a pure number begin with a c. (MUI Docs Reference).

Example:

[%mui.withStyles
  "ColorExample"({
    bgColor: ReactDOMRe.Style.make(~backgroundColor=MaterialUi.Colors.Red.c300, ())
  })
];

Overriding with classes

To take advantage of Reasons type system when overriding classes directly on components they have been converted into Variants and need to be passed as a list to the components classes prop. It is best used in combination with the MaterialUi.WithStyles component.

(MUI Docs Reference).

Example:

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

[%mui.withStyles
  "OverrideExample"({
    fontSize: ReactDOMRe.Style.make(~fontSize="30px", ()),
    bgColor:
      ReactDOMRe.Style.make(
        ~backgroundColor=MaterialUi.Colors.Red.c300,
        (),
      ),
  })
];

let make = _children => {
  ...component,
  render: _self =>
    <OverrideExample>
      ...{
        classes =>
          <MaterialUi.Button
            color=`Primary
            variant=`Contained
            classes=[
              Root(classes.fontSize),
              RaisedPrimary(classes.bgColor),
            ]>
            "Example Button"
          </MaterialUi.Button>
      }
    </OverrideExample>,
};