🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more
Socket
Book a DemoInstallSign in
Socket

react-circle-wave

Package Overview
Dependencies
Maintainers
1
Versions
5
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-circle-wave

React component designed to create a visually appealing circle with a wave effect animation around it

1.0.4
latest
npm
Version published
Maintainers
1
Created
Source

react-circle-wave

A React component to create a visually appealing circle with an animated wave effect around it. Integrate this component into your React application to add dynamic and eye-catching visuals to your UI!

Demo

On the project's website, you can access Storybook and a simple music player to see the component in action.

Installation

You can install via npm:

npm i react-circle-wave

Usage

To use CircleWave in your React application, simply import the component and include it in your JSX markup:

import React from 'react';
import { CircleWave } from 'react-circle-wave';

function App() {
    return (
        <div>
            <CircleWave size={100} color="magenta">
                <span>LIVE</span>
            </CircleWave>
        </div>
    );
}

export default App;

Props

PropDefaultDescription
size-Sets the width and height of the root element in pixels. The size of the inner circle and waves are calculated respectively.
speed1000Sets the duration of each animation cycle in milliseconds. Higher values result in slower animations.
points9Sets the number of moving anchor points on the wave circles.
opacity0.5Sets the opacity of the waves on a scale from 0 to 1.
amplitude0.2Sets the amplitude of animated waves as a fraction of the total size.
stoppedfalseDetermines whether the animation should be stopped or playing. The waves take one animation cycle to fully stop as they collapse/expand smoothly when this prop is changed.
color-Sets the solid fill color used for the overlay circle and waves.
colors-An array of colors to form an evenly spaced gradient color for the overlay circle and waves.
gradient-An array of gradient "stops" to create more advanced gradients with custom stops. Each stop is an object containing a color property and an offset property indicating the color position in the shape on a scale from 0 to 100.
gradientRotation90Sets gradient rotation in degrees (0 to 360).
children-Any valid React node to be rendered over the circle.
style-Any valid HTML style to be passed to the root div's style.
...props-Any other valid div props to be passed to root div.

Contributions

Contributions are welcome! If you encounter any issues or have suggestions for improvements, please open an issue or submit a pull request on GitHub.

Keywords

react

FAQs

Package last updated on 05 May 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts