React-Canvas-Nest

English | 简体中文

React component for a nest backgroud.

Creativity is inspired by canvas-nest.js

Install

# use yarn
yarn add react-canvas-nest

# or use npm
npm install react-canvas-nest

Usage

Note:

• You can refer to this example.
• Component size depends on parent node size.

Import Component

import ReactCanvasNest from 'react-canvas-nest';

Use Component

• Default

<ReactCanvasNest />

• Custom

<ReactCanvasNest className = 'canvasNest' config = {{ pointColor: ' 255, 255, 255 ' }} style = {{ zIndex: 99 }} />

API

className

Support className attribute

config

| Property | Description | Default | | ------------ | :------------------------------------------------: | :-----------: | | count | count of points | 88 | | pointR | radius of the point | 1 | | pointColor | | 114, 114, 114 | | pointOpacity | transparency of points | 1 | | dist | maximum distance between two point | 6000 | | lineColor | | 0, 0, 0 | | lineWidth | multiple of line width | 1 | | follow | mouse follow | true | | mouseDist | distance between point and mouse | 20000 |

style

Support style attribute, default style as follows:

| Property | Default | | ------------ | :-------: | | zIndex | -1 | | opacity | 1 | | display | block | | position | absolute |

Related projects

• canvas-nest.js: project use by native javascript.
• vue-canvas-nest: vue component wrapper.
• canvas-nest-for-wp: a wordpress plugin, search canvas-nest in wordpress store.

License

React-Canvas-Nest is MIT licensed.