t-bouncing-circles
TypeScript icon, indicating that this package has built-in type declarations

1.0.20 • Public • Published

t-bouncing-circles

Enhance your website's visual appeal with 't-bouncing-circles.' This React component allows you to effortlessly integrate captivating animated bouncing circles, making it ideal for dynamic banners, interactive backgrounds, and engaging user interfaces.

Installation

Install the package using npm:

npm install t-bouncing-circles

Properties

You can customize the appearance and behavior of the bouncing circles by providing custom props. Here are the customizable properties:

  • numberOfCircles (number, default: 50): Number of bouncing circles.
  • constantSpeed (number, default: 0.5): Constant speed of the circles.
  • circleColor (string, default: "rgba(210,208,220,0.5)"): Color of the circles.
  • connectedLineColor (string, default: "rgba(210,208,220,0.5)"): Color of the lines connecting circles.
  • connectedLineWidth (number, default: 1): Width of the lines connecting circles.
  • connectedRadius (number, default: 100): Radius within which circles are connected.
  • maximumConnection (number, default: 3): Maximum number of connections for each circle.
  • width (number): Width of the canvas (px) if undifined they will equal to width of their parent.
  • height (number): Height of the canvas (px) if undifined they will equal to height of their parent.

Basic Usage

Simply import the BouncingCircles component and include it in your React component:

import React from 'react';
import BouncingCircles from 't-bouncing-circles';

const YourComponent = () => {
  return (
    <div>
      {/* Your other components */}
      <BouncingCircles 
        width={800}
        height={800}
        numberOfCircles={50}
        constantSpeed={0.5}
        circleColor="rgba(210,208,220,0.5)"
        connectedLineColor="rgba(210,208,220,0.5)"
        connectedLineWidth={1}
        connectedRadius={100}
        maximumConnection={3}
      />
    </div>
  );
};

export default YourComponent;

Readme

Keywords

Package Sidebar

Install

npm i t-bouncing-circles

Weekly Downloads

0

Version

1.0.20

License

ISC

Unpacked Size

37.4 kB

Total Files

10

Last publish

Collaborators

  • extratha