# react-sketch-book > A module to easily build sketch Artboard with React Sketch.app or React Primitive Latest version **0.0.50** (published 2018-02-02) · MIT license · 0 weekly downloads ## Install ```sh npm install react-sketch-book pnpm add react-sketch-book yarn add react-sketch-book bun add react-sketch-book ``` Provides the command `react-sketch-book`. ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support; pre 1.0. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 0.0.50 | | Published | 2018-02-02 | | First published | 2017-12-12 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 13 | | Known vulnerabilities | 0 | | Install scripts | yes | | GitHub stars | 3 | | Author | François Rosato | | Maintainers | rosatof | | Keywords | sketch, react, storybook, react sketchapp, react primitive | ## Links - npm: https://www.npmjs.com/package/react-sketch-book - Repository: https://github.com/frosato-ekino/react-sketch-book - Homepage: https://github.com/frosato-ekino/react-sketch-book#readme - Issues: https://github.com/frosato-ekino/react-sketch-book/issues - npm.io page: https://npm.io/package/react-sketch-book ## Dependencies (13) - [react](https://npm.io/package/react.md) ^15.4.2 - [babel-cli](https://npm.io/package/babel-cli.md) ^6.26.0 - [commander](https://npm.io/package/commander.md) ^2.12.2 - [@skpm/builder](https://npm.io/package/@skpm/builder.md) ^0.2.0 - [react-sketchapp](https://npm.io/package/react-sketchapp.md) ^1.0.0-beta.5 - [recursive-readdir](https://npm.io/package/recursive-readdir.md) ^2.2.1 - [run-sketch-plugin](https://npm.io/package/run-sketch-plugin.md) ^1.0.3 - [babel-preset-react](https://npm.io/package/babel-preset-react.md) ^6.24.1 - [babel-preset-es2015](https://npm.io/package/babel-preset-es2015.md) ^6.24.1 - [react-test-renderer](https://npm.io/package/react-test-renderer.md) ^15.4.2 - [babel-plugin-transform-class-properties](https://npm.io/package/babel-plugin-transform-class-properties.md) 6.19.0 - [babel-plugin-transform-object-rest-spread](https://npm.io/package/babel-plugin-transform-object-rest-spread.md) 6.20.2 - [babel-plugin-transform-es2015-destructuring](https://npm.io/package/babel-plugin-transform-es2015-destructuring.md) 6.19.0 ## Alternatives - [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads - [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads - [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads - [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads - [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads ## Recent versions - 0.0.50 (latest) — 2018-02-02 - 0.0.49 — 2018-02-02 - 0.0.48 — 2018-01-25 - 0.0.47 — 2018-01-25 - 0.0.46 — 2018-01-25 - 0.0.45 — 2018-01-25 - 0.0.44 — 2018-01-25 - 0.0.43 — 2018-01-25 - 0.0.42 — 2018-01-25 - 0.0.41 — 2018-01-25 - 0.0.40 — 2018-01-25 - 0.0.39 — 2018-01-25 - 0.0.38 — 2018-01-25 - 0.0.37 — 2018-01-25 - 0.0.36 — 2018-01-25 - … 7 more at https://npm.io/package/react-sketch-book/versions ## README [![License][license-image]][license-url] [![styled with prettier][prettier-image]][prettier-url] # React Sketch Book ![](https://github.com/frosato-ekino/react-sketch-book/blob/master/img/capture.png) ## Disclaimer :warning: * [react-primitives][react-primitives-url] is only compatible with react 15.0 and is required (or at least strongly recommended). * [React Skecth.app][react-sketchapp-url] current version works with [Sketch version 47][sketch-url], 48 is is broken. ## Intro This package is an helper to make all your components available into a Sketch document easily. It uses [React Skecth.app][react-sketchapp-url] under the hood and take care of all the configuration for you. You just have to write ```.sketch.js``` files for your components and run the build command. The API is deeply inspired by the famous [Storybook][storybook-url]. ## Requirement :warning: * First, make sure you have installed [Sketch version 47][sketch-url], & a recent npm version. * Your components must be written using either [react-primitives][react-primitives-url] or [react-sketchapp][react-sketchapp-url]. * Open a new Sketch document ## Getting Started :runner: ### Install react-sketch-book package ``` npm i react-sketch-book --save -D ``` ### Add the command to your package.json ``` { "scripts": { "sketchbook": "react-sketch-book -p src" } } ``` The `-p` or `--path` argument is the path of your project folder relative to your root directory where react-sketch-book is setup. ### Write your sketch files ```js import React from 'react'; import { sketchOf } from 'react-sketch-book'; import Button from './Button'; // Component built with react-primitves or react-sketchapp sketchOf('Button') .add('Button1', () => ()) .add('ButtonWithEmoji', () => ()); ``` Name your files with `.sketch.js` extension. `eg: Button.sketch.js`. If you don't want to use `.sketch.js` extension for your files, you can provide a valid regexp using a flag into your script command `-r` or `--regexp` to change it. ``` { "scripts": { "sketchbook": "react-sketch-book -p src -r /\w+.sketch.js/gi" } } ``` ### Build your Sketch Book Open a new Sketch document if you haven't already and run the following command. ``` npm run sketchbook ``` ### Sample code * Download sketch (v47) and clone this [repository](https://github.com/frosato-ekino/react-sketch-book_sample) * run `npm install && npm run sketchbook` ## Thanks Made with :hearts: for React [sketch-url]: https://www.sketchapp.com/updates/ [storybook-url]: https://github.com/storybooks/storybook [react-sketchapp-url]: https://github.com/airbnb/react-sketchapp [react-primitives-url]: https://github.com/lelandrichardson/react-primitives [prettier-image]: https://img.shields.io/badge/styled_with-prettier-ff69b4.svg?style=flat-square [prettier-url]: https://github.com/prettier/prettier [license-image]: https://img.shields.io/github/license/frosato-ekino/react-sketch-book.svg?style=flat-square [license-url]: https://github.com/frosato-ekino/react-sketch-book/blob/master/LICENSE --- _Source: https://npm.io/package/react-sketch-book · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._