https://github.com/peteroid/react-polygon
A react add-on for drawing polygons for any number of sides, as well as animation
https://github.com/peteroid/react-polygon
animation hexagon pentagon polygon react reactjs
Last synced: 5 months ago
JSON representation
A react add-on for drawing polygons for any number of sides, as well as animation
- Host: GitHub
- URL: https://github.com/peteroid/react-polygon
- Owner: peteroid
- Created: 2016-08-04T07:08:31.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2020-04-15T22:31:27.000Z (about 5 years ago)
- Last Synced: 2025-01-31T18:28:05.919Z (5 months ago)
- Topics: animation, hexagon, pentagon, polygon, react, reactjs
- Language: JavaScript
- Homepage: https://peteroid.github.io/react-polygon/
- Size: 488 KB
- Stars: 31
- Watchers: 4
- Forks: 4
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
[](http://standardjs.com/) [](https://travis-ci.org/peteroid/react-polygon) [](https://badge.fury.io/js/react-polygon)
# [](https://peteroid.github.io/react-polygon/) react-polygon
A react add-on for drawing polygons for any number of sides, as well as animation
# Demo
[https://peteroid.github.io/react-polygon/](https://peteroid.github.io/react-polygon/)
# Usage
```javascript
npm install react-polygon --save
```
```javascript
import Polygon from 'react-polygon'
// add this to your components
```
# Build your own
```javascript
npm install
npm run webpack
```
# Props
_name : propType = defaultValue_
## Basic
- n : number = 3
- size : number = 50
- fill : string = "#ad893e"
- ratios : [number] = [1, 1, 1, 1, 1]
## Animation
- isAnimating : bool = true
- duration : number = 1000
## renderPoint
You can render extra elements on each point by passing a function to the props `renderPoint`. Here is an example for rendering a point on each vertice:
```javascript
import React, { Component } from 'react'
import Polygon from 'react-polygon'
class MyPolygon extends Component {
myRenderPoint (point) {
return (
)
}
render () {
return (
)
}
}
```
# Credits
- logo by [Icons8](https://icons8.com)