https://github.com/rmariuzzo/react-grille
Make a grille pattern! AKA grid pattern or mesh!
https://github.com/rmariuzzo/react-grille
grid-pattern grille react react-component
Last synced: 4 months ago
JSON representation
Make a grille pattern! AKA grid pattern or mesh!
- Host: GitHub
- URL: https://github.com/rmariuzzo/react-grille
- Owner: rmariuzzo
- License: mit
- Created: 2017-11-29T14:49:23.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2017-11-29T19:07:23.000Z (over 8 years ago)
- Last Synced: 2025-09-26T01:50:30.482Z (9 months ago)
- Topics: grid-pattern, grille, react, react-component
- Language: JavaScript
- Homepage: https://rmariuzzo.github.io/react-grille/index.html
- Size: 1.46 MB
- Stars: 5
- Watchers: 2
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
## Features
- **Only 2.48KB** (that's 1.08KB gzipped!).
- Only an single `
` node is rendered.
- Grid is built with CSS using [`linear-gradient`](https://caniuse.com/#search=linear).
- Control block and border size!
## Installation
- `npm install react-grille --save`
or
- `yarn add react-grille`
## Usage
```js
import React from 'react'
import Grille from 'react-grille'
const Demo = () => (
Hi 👋
)
```
## Documentation
| Property | Type | Default | Description
| --- | --- | --- | ---
| `blockSize` | `Number` | `50` | The size of blocks.
| `borderSize` | `Number` | `1` | The size of borders.
| `borderColor`| `String` | `"red"` | The border color.
## Tests
Tests are manually done using Storybook. It can be run locally with: `yarn storybook`.
## Development
To start contributing to this project, please do:
1. Fork and clone this repo.
2. Do your work.
3. Create a PR.
## Releases
To release this project the following tasks should be done:
1. Build distribution files: `yarn build`.
2. Build Storybook demo files: `yarn build-storybook`.
3. Bump version and create tag: `yarn version --new-version #.#.# -m 'Version %s.'`.
4. Push new created tag: `git push origin --tags`.
5. Publish: `npm publish`.
---
Made with :heart: by [Rubens Mariuzzo](https://github.com/rmariuzzo).
[MIT License](LICENSE)