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.

| Prop | Type | Default | Explanation | | --- | :---: | :------: | :-------: | | height | number (px) | 600 | Height of background canvas | | width | number (px) | 600 | Width of background canvas| | strokeColor | string (hex) | '#d3dee2' | Line Color | | strokeWidth | number (px) | 2 | Line Width | | lineLength | number (px) | 50 | Length of each individual line | | animationSpeed | number (ms) | 1000 | Animation duration in between each iteration in ms | | controlClassnames | object | { controlContainer: '', controlStart: '', controlReset: '', controlPause: '' } | classnames for the control buttons |

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