https://github.com/avishwakarma/react-tiny-grid

A Grid Component for React
https://github.com/avishwakarma/react-tiny-grid

Last synced: about 2 months ago
JSON representation

A Grid Component for React

• Host: GitHub
• URL: https://github.com/avishwakarma/react-tiny-grid
• Owner: avishwakarma
• Created: 2024-02-06T16:38:55.000Z (12 months ago)
• Default Branch: main
• Last Pushed: 2024-02-06T22:23:00.000Z (12 months ago)
• Last Synced: 2024-02-07T23:32:44.588Z (12 months ago)
• Language: TypeScript
• Size: 18.6 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# react-tiny-grid

A simple grid system for React.

## Installation

```bash

npm i -S react-tiny-grid

```

## Usage

#### Simple 12 columns grid

```jsx

import { Gridm, Row, Cell } from "react-tiny-grid";

const Page = () => {

  return (

    

      

        1

        2

        3

        4

        5

        6

        7

        8

        9

        10

        11

        12

      

    

  );

};

```

#### Using breakpoints

```jsx

import { Gridm, Row, Cell, Breakpoints } from "react-tiny-grid";

const breakpoints: Breakpoints = {

  small: 320,

  medium: 768,

  large: 1367

};

const Page = () => {

  return (

    

      

        1

        2

        3

        4

        5

        6

        7

        8

        9

        10

        11

        12

      

    

  );

};

```

## Properties

### Grid

#### `breakpoints`

Responsive breakpoints

type: `{small: number, medium: number, large: number}`

default value: `{small: 320, medium: 768, large: 1367}`

To change the default breakpoints, you can pass an object with

```jsx

const breakpoints = {

  small: 320,

  medium: 768,

  large: 1367

};

...;

```

#### `columns`

Columns visible for each breakpoints

type: `[number, number, number]`

default value: `[4, 6, 12]`

To change the default columns, you can pass an array with

```jsx

const columns = [4, 6, 12];

...;

```

#### `maxWidth`

Maximum width of grid container

type: `number`

default value: `1400`

To change the default max width, you can pass a number with

```jsx

const maxWidth = 1400;

...;

```

#### `children`

Children of grid

type: `FC | Array>`

```jsx

  ...

```

#### Row

#### `children`

Children of row

type: `FC | Array>`

```jsx

  

    ...

  

```

#### Cell

#### `span`

Spread of Cell within the Grid

type: `[number, number, number] | number`

default value: `[4, 6, 12]`

```jsx

  

    ...

  

```

_The above Cell will take 4 columns in small, 6 in medium and 12 is large screens._

#### `skip`

Skip the cell from the grid (Add margin-left)

type: `[number, number, number] | number`

default value: `[0, 0, 0]`

```jsx

  

    ...

  

```

_The above Cell will skip 6 columns from the grid on large screens._

### `useBreakpoints` hook

Used to get the current breakpoint and viewport width

```jsx

import { useBreakpoints } from "react-tiny-grid";

const breakpoints = {

  small: 320,

  medium: 768,

  large: 1367

};

const { breakpoint, width } = useBreakpoints(breakpoints);

```

### Nested Grid example

`rc-grid` supports nested grids. You can use `Row` and `Cell` components inside another `Cell` component.

```jsx

  

    

      

        

          
Full width paragraph

        

      

    

  


```

## Author

![my_pic](https://avatars1.githubusercontent.com/u/389185?s=100&v=1)

[](https://avatars1.githubusercontent.com/u/389185?s=460&v=4)

### Ashok Vishwakarma

[LinkedIn](https://www.linkedin.com/in/avishwakarmadev/) • [Twitter](https://twitter.com/avishwakarmadev) • [Medium](https://medium.com/@avishwakarma)

• [Website](https://avishwakarma.dev)

```

```