React-svg-drag-and-select

A SVG playground to drag and select shape elements.

Install

$ yarn add react-svg-drag-and-select

Usage

import SVGContainer from 'react-svg-drag-and-select';

<SVGContainer
  width={300}
  height={300}
  style={{ backgroundColor: 'aliceblue' }}
  onSelectChange={this.onSelectChange}
  onItemsChange={this.onItemsChange}
  items={items}
  isMovable={isMovable}
  isSelectable={!isMovable}
/>

Please see the story example file for more detail.

API

Demo

• https://react-svg-drag-and-select.netlify.com/

Technology Stacks

• Storybook: 📓 Interactive development & testing environment for React, React-Native, Vue UI components.
• PureScript: A strongly-typed functional programming language that compiles to JavaScript.
• Travis: CI

Developer Guide

Requirements

• node >= 8.6.0
• npm >= 5.3.0
• yarn >= 1.1.0

$ git clone https://github.com/evenchange4/react-svg-drag-and-select.git
$ npm install -g purescript pulp bower # For PureScript 
$ yarn install --pure-lockfile
$ ./node_modules/.bin/bower install

$ yarn start
$ yarn run build

Test

$ yarn run format
$ yarn run eslint
$ yarn run test:watch

Github release / NPM release

$ npm version patch
$ git push

CONTRIBUTING

• ⇄ Pull requests and ★ Stars are always welcome.
• For bugs and feature requests, please create an issue.
• Pull requests must be accompanied by passing automated tests ($ yarn run test).

CHANGELOG

LICENSE

MIT: http://michaelhsu.mit-license.org