rescript-grid

    0.1.2 • Public • Published

    ReScript React CSS Grid Wrapper

    React compound component that wraps css grid. Supports fixed columns / rows. No dependencies.

    API example: https://rescript-grid.vercel.app/

    Install

    yarn add rescript-grid

    Add to bsconfig.json "bs-dependencies"

    "bs-dependencies": [
      "reason-react",
      "rescript-grid"
    ]
    

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

    Contribute

    If you have a bug to report or a feature request, please add it as an issue or make a pull request.

    License

    MIT © gilevskaya

    Install

    npm i rescript-grid

    DownloadsWeekly Downloads

    0

    Version

    0.1.2

    License

    MIT

    Unpacked Size

    7.65 kB

    Total Files

    7

    Last publish

    Collaborators

    • gilevskaya