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: about 1 month 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 (over 8 years ago)
• Default Branch: master
• Last Pushed: 2020-04-15T22:31:27.000Z (over 4 years ago)
• Last Synced: 2024-09-28T12:22:27.021Z (about 2 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

        
[![Standard - JavaScript Style Guide](https://img.shields.io/badge/code%20style-standard-brightgreen.svg)](http://standardjs.com/) [![Build Status](https://travis-ci.org/peteroid/react-polygon.svg?branch=master)](https://travis-ci.org/peteroid/react-polygon) [![npm version](https://badge.fury.io/js/react-polygon.svg)](https://badge.fury.io/js/react-polygon)

# [![react-polygon](https://png.icons8.com/nolan/40/ff723f/polygon.png)](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)