react-dragon-curve v1.0.0

React component for a Heighway Dragon dragon curve

React Dragon Curve

Installation

npm install react-pgn-viewer --save

Usage

Add this style or similar to your project

  .konvajs-content {
    border: 3px solid #e02626;
    background-color: #000814;
  }

then

import DragonCurve from 'react-dragon-curve'

class Example extends React.Component {
  render() {
    return (
      <DragonCurve
        height={600}
        width={600}
        controlClassnames={{
          controlContainer: 'button-container',
          controlStart: 'btn btn-primary',
          controlReset: 'btn btn-warning',
          controlPause: 'btn btn-warning',
        }}
        strokeWidth={2}
        strokeColor={'#d3dee2'}
        lineLength={25}
        animationSpeed={1500}
      />
    )
  }
}

Properties

This library uses react-konva for the canvas and drawing and shares a few props.

Demo

To be added

Contributing

To run the example:

npm install
npm run build
npm run dev

Then open localhost:8000 in a browser.

Tested with React 16.6