Research
Security News
Quasar RAT Disguised as an npm Package for Detecting Vulnerabilities in Ethereum Smart Contracts
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
@jsiebern/bs-material-ui
Advanced tools
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.
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
.
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
.
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>,
};
FAQs
This library provides Reason bindings for material-ui.
The npm package @jsiebern/bs-material-ui receives a total of 52 weekly downloads. As such, @jsiebern/bs-material-ui popularity was classified as not popular.
We found that @jsiebern/bs-material-ui demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
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.
Research
Security News
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
Security News
Research
A supply chain attack on Rspack's npm packages injected cryptomining malware, potentially impacting thousands of developers.
Research
Security News
Socket researchers discovered a malware campaign on npm delivering the Skuld infostealer via typosquatted packages, exposing sensitive data.