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.
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.
This library provides Reason bindings for material-ui. It's automatically generated by reason-mui-binding-generator.
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.
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.
Please see the examples folder.
(Running the example code: yarn examples)
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).
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>,
};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>
}
/>,
};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, ())
})
];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.
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>,
};](# Reason bindings for material-ui This library provides Reason bindings for material-ui. It's automatically generated by the tools contained in this repo.
There are a few backsteps and important changes in 1.1.0:
- I have removed the icons again in favor of this package: @mscharley/bs-material-ui-icons This package basically contains them in the way I would have published them in their own package, so I can't see any need to do so anymore.
- This repo is now a mono-repo managed by lerna as managing this project got a little out of hand. Important: The packages still should be treated separately when playing around with the code, as there are a great many steps involved in actually getting to the end result. Even more important: I do not guarantee that the build process will work for you. I have tried to generalize it a bit but it's still quite messy. It's good enough for me if I can use it personally to publish the bindings. Feel free to send PRs that alleviate the pain for others a bit.
Please make sure to look at the changelog for the breaking changes!
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.
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.
Please see the examples folder.
(Running the example code: yarn examples)
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).
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>,
};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>
}
/>,
};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, ())
})
];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.
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>,
};