react-canvas-nest

1.1.1 • Public • Published

React-Canvas-Nest

NPM version GitHub license npm bundle size (minified + gzip)

English | 简体中文

React component for a nest backgroud.

Creativity is inspired by canvas-nest.js

screenshot

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

License

React-Canvas-Nest is MIT licensed.

Package Sidebar

Install

npm i react-canvas-nest

Weekly Downloads

81

Version

1.1.1

License

MIT

Unpacked Size

74.9 kB

Total Files

15

Last publish

Collaborators

  • flyerh