https://github.com/gone369/react-wrappable-fluid-grid

a wrappable fluid grid react component
https://github.com/gone369/react-wrappable-fluid-grid

Last synced: about 2 months ago
JSON representation

a wrappable fluid grid react component

• Host: GitHub
• URL: https://github.com/gone369/react-wrappable-fluid-grid
• Owner: gone369
• Created: 2021-01-28T07:59:29.000Z (almost 4 years ago)
• Default Branch: master
• Last Pushed: 2022-01-13T09:04:17.000Z (about 3 years ago)
• Last Synced: 2024-10-30T12:53:07.039Z (3 months ago)
• Language: TypeScript
• Homepage: react-wrappable-fluid-grid-git-master.gone369.vercel.app
• Size: 216 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# React Wrappable Fluid Grid

[![npm](https://img.shields.io/npm/v/react-wrappable-fluid-grid.svg)](https://www.npmjs.com/package/react-wrappable-fluid-grid) ![license](https://img.shields.io/npm/l/react-wrappable-fluid-grid.svg) ![github-issues](https://img.shields.io/github/issues/gone369/react-wrappable-fluid-grid.svg) ![npm-downloads](https://img.shields.io/npm/dt/react-wrappable-fluid-grid.svg)

react-wrappable-fluid-grid is exactly like it sounds: A simple to use react fluid grid component that auto wraps its items.

No need to define breakpoints or spans. Give the grid item a min and max width and you're good to go.

![Example GIF](https://i.imgur.com/rnGDjPY.gif)  

[Original Size GIF](https://i.imgur.com/i0hft6t.gifv)

```jsx

import React from 'react';

import Grid from 'react-wrappable-fluid-grid'

function GridParent(){

  const data = [

    {value: 1},

    {value: 2},

    {value: 3},

    {value: 4},

    {value: 5},

    {value: 6},

  ]

  return (

    

      {(dataItem, i, colWidth) => {

        return (

          


            
{dataItem.value}

            
width: {colWidth}

          

        )

      }}

    

  )

}

```


## Compatibility

React > v16.8  (relies on hooks)

Uses [resize-observer](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) under the hood  

https://caniuse.com/?search=resizeObserver

thus IE is not supported :sunglasses:

## Installation

npm

```bash

npm install react-wrappable-fluid-grid

```

yarn

```bash

yarn add react-wrappable-fluid-grid

```

## Basic Usage

[visit live docs](https://react-wrappable-fluid-grid.vercel.app/)

## Typescript

```tsx

import React from 'react';

import Grid from 'react-wrappable-fluid-grid';

interface DataItem {

  value: number;

}

function GridParent: React.FC(){

  const data: DataItem[] = [

    { value: 1 }

  ];

  return (

    

      data={data}

    >

      {(dataItem, i, colWidth) => {

        return (

          
{dataItem.value}

        )

      }}

    

  );

}


```