Skip to content

holmesal/react-sketch-grid

Repository files navigation

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?

About

A React port of Sketch's grid overlay

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published