🐙 Github: holmesal/react-sketch-grid

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

Nice and simple.

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 /> 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.



Source link https://blog..io/using--grid-in-react-35e67cf7e2d2?source=rss—-eb297ea1161a—4

LEAVE A REPLY

Please enter your comment!
Please enter your name here