A React port of Sketch's grid overlay.
Go to alonso.io, and press ctrl+g to toggle the grid on and off.
🔥 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
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.
yarn add react-sketch-grid
- Add the
<Grid />
component. - 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
};
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>;
- 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?