Using Sketch’s grid in React

🐙 Github: holmesal/react-sketch-grid

I design in Sketch, and I use grids pretty heavily. I know there are some fancy grid plugins out there, but I find that 90% of the time Sketch’s built-in grid works just fine. You know, this one:

When I start translating my design work into code, I don’t want to lose that grid. What’s the point in sweating the grid in the design phase, if everything starts drifting off-grid in the final product?

I looked around and didn’t see anything that quite fit the bill, so I decided to make it myself. You just stick the <Grid /> react component somewhere in your render tree, and then you can toggle on a sketch-like grid by hitting ctrl+g

It worked well for me on a recent project, so I’m sharing it with you! Here’s what it looks like in action:

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

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>;

More information

Got an idea or have a problem? Open an issue over on the github page.