react-sketch-grid

    0.1.5 • Public • Published

    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?

    Install

    npm i react-sketch-grid

    DownloadsWeekly Downloads

    9

    Version

    0.1.5

    License

    none

    Unpacked Size

    8.67 kB

    Total Files

    5

    Last publish

    Collaborators

    • holmesal