neonizer
v1.0.1
Published
Neonizer is a React component that adds vibrant neon color effects to text content. Easily integrate this component into your React applications to create eye-catching, dynamic text displays with customizable color transitions.
Downloads
42
Maintainers
Readme
Neonizer
Neonizer is a React component that adds vibrant neon color effects to text content. Easily integrate this component into your React applications to create eye-catching, dynamic text displays with customizable color transitions.
Demo
Installation
Install neonizer via npm:
npm install neonizer
Usage
To use Neonizer in your React application, import the component and place it around the text you want to apply the neon effect to.
import React from "react";
import Neonizer from "neonizer";
function App() {
return (
<div>
<h1>Neonizer Example</h1>
<Neonizer>New and vibrant text!</Neonizer>
</div>
);
}
export default App;
Props
The Neonizer component accepts the following props:
children
: The text content to be styled with the neon effect.className
: Additional CSS classes for styling.time
: Time interval in milliseconds for color change (default: 2000ms).excludeColors
: Colors to exclude from the random selection.newColors
: Additional colors to include in the random selection.
Base Colors
The default base colors available for the neon effect are:
- Neon Blue:
#1f51ff
- Electric Cyan:
#0ff0fc
- Neon Purple:
#bc13fe
- Proton Purple:
#8a2be2
- Neon Pink:
#ff44cc
- Neon Magenta:
#ea00ff
- Plastic Pink:
#ff1493
- Neon Yellow:
#fff01f
- Absinthe:
#e7ee4f
- Chartreuse Yellow:
#dfff00
- Neon Red:
#ff3131
- Electric Orange:
#ff5e00
- Neon Green:
#39ff14
- UFO Green:
#7fff00
- Electric Lime:
#ccff00
Feel free to experiment with these colors or add your own to create stunning effects!
License
This project is licensed under the MIT License.