├── .babelrc
├── .eslintrc
├── .flowconfig
├── .gitignore
├── .vscode
└── settings.json
├── README.md
├── demo.gif
├── dist
├── Grid.js
├── Grid.module.css
└── index.js
├── package-lock.json
├── package.json
├── public
├── favicon.ico
├── index.html
└── manifest.json
├── src
├── index.js
└── lib
│ ├── Grid.js
│ ├── Grid.module.css
│ └── index.js
└── yarn.lock
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": ["react-app"],
3 | "plugins": ["babel-plugin-transform-flow-comments"]
4 | }
5 |
--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
1 | { "extends": "react-app" }
2 |
--------------------------------------------------------------------------------
/.flowconfig:
--------------------------------------------------------------------------------
1 | [ignore]
2 |
3 | [include]
4 |
5 | [libs]
6 |
7 | [lints]
8 |
9 | [options]
10 |
11 | [strict]
12 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/ignore-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 |
6 | # testing
7 | /coverage
8 |
9 | # production
10 | /build
11 |
12 | # misc
13 | .DS_Store
14 | .env.local
15 | .env.development.local
16 | .env.test.local
17 | .env.production.local
18 |
19 | npm-debug.log*
20 | yarn-debug.log*
21 | yarn-error.log*
22 |
--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 | "flow.useNPMPackagedFlow": true,
3 | "javascript.validate.enable": false,
4 | "files.associations": {
5 | "*.js": "javascriptreact"
6 | }
7 | }
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # react-sketch-grid
2 |
3 | A React port of Sketch's grid overlay.
4 |
5 | 
6 |
7 | ## Live Demo
8 |
9 | Go to [alonso.io](http://alonso.io), and press _ctrl+g_ to toggle the grid on and off.
10 |
11 | ## Features
12 |
13 | 🔥 **Hotkeys** - toggle on/off with ctrl+G, just like in Sketch
14 |
15 | 💾 **Persistent** - remembers state across page reloads
16 |
17 | 👩🎨 **Customizable** - control grid size, color, and more
18 |
19 | 🧘♀️ **Flexible** - can be used for whole-page grids, or inside single components
20 |
21 | ## Goal
22 |
23 | 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.
24 |
25 | ## Installation
26 |
27 | `yarn add react-sketch-grid`
28 |
29 | ## Usage
30 |
31 | 1. Add the `` component.
32 | 2. Add `position: relative` to any parent element you want the grid to “fill”
33 |
34 | Here are the available props:
35 |
36 | ```js
37 | type Props = {
38 | // Width, in pixels, of each small grid line
39 | blockSize: number,
40 |
41 | // Show thikk lines every N thin lines
42 | thickLinesEvery: number,
43 |
44 | // Color of the thin lines
45 | lightColor: string,
46 |
47 | // Color of the thick lines
48 | darkColor: string
49 | };
50 | ```
51 |
52 | ## Example
53 |
54 | ```jsx
55 | import Grid from 'react-sketch-grid';
56 |
57 |
58 |
59 |
Control + G to toggle grid
60 |
The grid will fill the whole div
61 |
7 |
8 |
Control + G to toggle grid
9 |
10 | );
11 |
12 | render(, document.getElementById('root'));
13 |
--------------------------------------------------------------------------------
/src/lib/Grid.js:
--------------------------------------------------------------------------------
1 | // @flow
2 | import React, { Component } from 'react';
3 | import './Grid.module.css';
4 | import range from 'lodash.range';
5 | import Measure from 'react-measure';
6 |
7 | type Props = {
8 | // Width, in pixels, of each small grid line
9 | blockSize: number,
10 |
11 | // Show thikk lines every N thin lines
12 | thickLinesEvery: number,
13 |
14 | // Color of the thin lines
15 | lightColor?: string,
16 |
17 | // Color of the thick lines
18 | darkColor?: string
19 | };
20 |
21 | type State = {
22 | dimensions: {
23 | width: number,
24 | height: number
25 | },
26 | visible: boolean
27 | };
28 |
29 | type direction = 'vertical' | 'horizontal';
30 |
31 | const LOCAL_STORAGE_KEY = 'Grid.Visible';
32 |
33 | class Grid extends Component {
34 | static defaultProps = {
35 | blockSize: 12,
36 | thickLinesEvery: 6,
37 | lightColor: 'rgba(255, 0, 0, 0.2)',
38 | darkColor: 'rgba(0, 0, 255, 0.2)'
39 | };
40 |
41 | state = {
42 | visible: false,
43 | dimensions: {
44 | width: 0,
45 | height: 0
46 | }
47 | };
48 |
49 | componentDidMount() {
50 | document.addEventListener('keydown', this.onKeyDown);
51 |
52 | const raw = localStorage.getItem(LOCAL_STORAGE_KEY);
53 |
54 | if (raw) {
55 | const visible = !!JSON.parse(raw);
56 | this.setState({ visible });
57 | }
58 | }
59 |
60 | componentWillUnmount() {
61 | document.removeEventListener('keydown', this.onKeyDown);
62 | }
63 |
64 | onKeyDown = ({ key, ctrlKey }: KeyboardEvent) => {
65 | if (key === 'g' && ctrlKey) this.toggleVisible();
66 | };
67 |
68 | toggleVisible = () => {
69 | const visible = !this.state.visible;
70 | this.setState({ visible });
71 | localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(visible));
72 | };
73 |
74 | renderLine = (direction: direction, idx: number) => {
75 | const { blockSize, thickLinesEvery, lightColor, darkColor } = this.props;
76 | const key = direction + idx;
77 | const style = Object.assign(
78 | {},
79 | {
80 | backgroundColor: idx % thickLinesEvery === 0 ? darkColor : lightColor
81 | },
82 | direction === 'horizontal'
83 | ? {
84 | left: 0,
85 | right: 0,
86 | height: 1,
87 | top: idx * blockSize
88 | }
89 | : {
90 | left: idx * blockSize,
91 | top: 0,
92 | bottom: 0,
93 | width: 1
94 | }
95 | );
96 | return ;
97 | };
98 |
99 | render() {
100 | const { visible, dimensions } = this.state;
101 | const { blockSize } = this.props;
102 |
103 | if (!visible) return ;
104 | const numHorizontal = Math.floor(dimensions.height / blockSize);
105 | const numVertical = Math.floor(dimensions.width / blockSize);
106 | return (
107 | {
110 | this.setState({ dimensions: contentRect.bounds });
111 | }}
112 | >
113 | {({ measureRef }) => (
114 |
115 | {range(1, numHorizontal + 1).map(idx =>
116 | this.renderLine('horizontal', idx)
117 | )}
118 | {range(0, numVertical + 1).map(idx =>
119 | this.renderLine('vertical', idx)
120 | )}
121 |
122 | )}
123 |
124 | );
125 | }
126 | }
127 |
128 | export default Grid;
129 |
--------------------------------------------------------------------------------
/src/lib/Grid.module.css:
--------------------------------------------------------------------------------
1 | .Grid {
2 | display: flex;
3 | flex: 1;
4 | align-self: stretch;
5 | pointer-events: none;
6 | position: absolute;
7 | top: 0;
8 | left: 0;
9 | right: 0;
10 | bottom: 0;
11 | }
12 |
13 | .GridLine {
14 | position: absolute;
15 | }
16 |
--------------------------------------------------------------------------------
/src/lib/index.js:
--------------------------------------------------------------------------------
1 | import Grid from './Grid';
2 | export default Grid;
3 |
--------------------------------------------------------------------------------