react-grid-dashboard
    TypeScript icon, indicating that this package has built-in type declarations

    0.0.28 • Public • Published

    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

    Install

    npm i react-grid-dashboard

    DownloadsWeekly Downloads

    11

    Version

    0.0.28

    License

    MIT

    Unpacked Size

    45.8 kB

    Total Files

    34

    Last publish

    Collaborators

    • gilevskaya