README
ReScript CSS Grid Wrapper
React component for a grid layout within fixed width / height. Usefull for dashboards or full screen web applications.
Wraps css grid. No dependencies.
Install
yarn add react-grid-dashboard
And add it to bsconfig.json "bs-dependencies"
Usage with ReScript
@react.component
let make = () => {
<div style={ReactDOM.Style.make(~height="100vh", ())}>
// default columns=1, rows=1
// gap and fixed are optional
<Grid columns={12} rows={12} gap="10px" fixed={[Grid.Row(0, "70px")]}>
// no x or y - defaults to auto position
// default w=1 h=1
<Grid.Item w={12} h={1}>
<div
style={ReactDOM.Style.make(~padding="10px", ~background="Turquoise", ~height="100%", ())}>
{"Menu"->React.string}
</div>
</Grid.Item>
<Grid.Item y={1} w={5} h={4}>
<div
style={ReactDOM.Style.make(
~padding="10px",
~background="LightSkyBlue",
~height="100%",
(),
)}>
{"Component A"->React.string}
</div>
</Grid.Item>
<Grid.Item y={5} w={5} h={7}>
<div
style={ReactDOM.Style.make(
~padding="10px",
~background="LightGreen",
~height="100%",
~overflowY="auto",
(),
)}>
{"Component B "->Js.String2.repeat(1000)->React.string}
</div>
</Grid.Item>
<Grid.Item x={5} y={1} w={7} h={11}>
<div
style={ReactDOM.Style.make(~padding="10px", ~background="LightGray", ~height="100%", ())}>
{"Component C"->React.string}
</div>
</Grid.Item>
</Grid>
</div>
}
License
MIT © gilevskaya