A React port of Sketch's grid overlay
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.vscode
dist
public
src
.babelrc
.eslintrc
.flowconfig
.gitignore
README.md
demo.gif
package-lock.json
package.json
yarn.lock

README.md

react-sketch-grid

A React port of Sketch's grid overlay.

Demo

Live Demo

Go to alonso.io, and press ctrl+g to toggle the grid on and off.

Features

🔥 Hotkeys - toggle on/off with ctrl+G, just like in Sketch

💾 Persistent - remembers state across page reloads

👩‍🎨 Customizable - control grid size, color, and more

🧘‍♀️ Flexible - can be used for whole-page grids, or inside single components

Goal

I design in Sketch, and I use grids pretty heavily. When I start implementing the layout in code, I want to be looking at exactly the same grid I used in the design phase.

Installation

yarn add react-sketch-grid

Usage

  1. Add the <Grid /> component.
  2. Add position: relative to any parent element you want the grid to “fill”

Here are the available props:

type Props = {
  // Width, in pixels, of each small grid line
  blockSize: number,

  // Show thikk lines every N thin lines
  thickLinesEvery: number,

  // Color of the thin lines
  lightColor: string,

  // Color of the thick lines
  darkColor: string
};

Example

import Grid from 'react-sketch-grid';

<div style={{ position: 'relative' }}>
  <Grid />
  <h1>Control + G to toggle grid</h1>
  <p>The grid will fill the whole div</p>
</div>;

TODO list / help wanted

  • react-native compatibility (<div /> —> <View />)
  • remove need for position: relative on parent element?
  • counting blocks is no fun - find a better way?
  • make hotkey customizable
  • add prop for line thickness?