Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More

@jsiebern/bs-material-ui

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@jsiebern/bs-material-ui

This library provides Reason bindings for material-ui.


Version published
Weekly downloads
74
increased by1.37%
Maintainers
1
Weekly downloads
 
Created

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>,
};

FAQs

Package last updated on 12 Dec 2018

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts