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
This library provides Reason bindings for material-ui. It's automatically generated by reason-mui-binding-generator.
These bindings are mostly complete, just a few more indepth use cases (Theming etc.) are missing. I use them in production daily by now, still, if you encounter any problems please feel free to open an issue
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)Add the entry ./node_modules/@jsiebern/bs-material-ui/ppx_withStyles
to the ppx-flags
node of your bsconfig.json
.
Please see the examples folder.
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)
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
render=(
classes =>
<div className=classes.alignRight>
(
ReasonReact.stringToElement("Example text - aligned to the right")
)
</div>
)
/>
};
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>
(
ReasonReact.stringToElement("Example text - aligned to the right")
)
</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
render=(
classes =>
<MaterialUi.Button
color=`Primary
variant=`Raised
classes=[Root(classes.fontSize), RaisedPrimary(classes.bgColor)]>
(ReasonReact.stringToElement("Example Button"))
</MaterialUi.Button>
)
/>
};
Theme
structure & create a converter for itwithStyles
theme => object
functionColors
moduletheme => object
pattern as withStyles
argumentWithTheme
componentThemeProvider
componentFAQs
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.