react-cool-wrappers

react-cool-wrappers

Description:

react-cool-wrappers is a component wrapper designed to enhance your React applications with visually appealing gradient shadows and borders. With built-in animation support, it adds an extra layer of dynamism to your UI components. Customize colors and animations to fit the aesthetic of your project seamlessly.

Key Features:

• Gradient shadows and borders
• Animation support
• Customizable colors and animations

Peer Dependencies

Make sure to install peer dependencies! Below are the list of peer dependencies.

• react >=16.14.0 <=18.3.1
• react-dom >=16.14.0 <=18.3.1
• styled-components >=4.4.1 <=6
• tslib>=2 will be removed soon!

APIs

GradientBorder

Importing

import {GradientBorder} from 'react-cool-wrappers';

Usage

const BorderButton = () => {
  return (
    <GradientBorder
      colors={[
        "blue",
        "skyblue",
        "royalblue",
        "teal",
        "pink",
        "purple",
        "blue",
      ]}
      size="10px"
      animation="train"
    >
      <button>Cool Button!</button>
    </GradientBorder>
  );
};

Properties

Parameter	Type	Description	Default
colors	Array<string>	Required. Pass in an array of colors used for border gradient. It's recommended to keep the first & last color the same to enable seamless animation.	undefined
size	string	This represents the border size of the wrapper. Expects a pixel value.	10px
borderRadius	string	This represents the border-radius of the wrapper. Expects a pixel value.	10px
blur	string	This represents the blur value for the gradient. Expects a pixel value.	16px
animation	'off' | 'pulse'	This represents the type of animation applied.	off
animDuration	number	This represents the animation duration.	Default is different for different types
attrs	HTMLAttributes<HTMLDivElement>	You can pass in the custom attributes for the wrapper here. Passed attributes will be provided to the wrapper.	undefined

Demo

GradientShadow

Importing

import {GradientShadow} from 'react-cool-wrappers';

Usage

const ShadowButton = () => {
  return (
    <GradientShadow
      colors={[
        "blue",
        "skyblue",
        "royalblue",
        "teal",
        "pink",
        "purple",
        "blue",
      ]}
      spread="10px"
    >
      <button>Cool Button!</button>
    </GradientShadow>
  );
};

Properties

Parameter	Type	Description	Default
colors	Array<string>	Required. Pass in an array of colors used for gradient. It's recommended to keep the first & last color the same to enable seamless animation.	undefined
spread	string	This represents the shadow spread size. Expects a pixel value.	10px
borderRadius	string	This represents the border-radius of the wrapper. Expects a pixel value.	10px
blur	string	This represents the blur value for the shadow. Expects a pixel value.	16px
animation	'off' | 'pulse'	This represents the type of animation applied.	off
animDuration	number	This represents the animation duration.	Default is different for different types
attrs	HTMLAttributes<HTMLDivElement>	You can pass in the custom attributes for the wrapper here. Passed attributes will be provided to the wrapper.	undefined

Demo

Feedback

If you have any feedback, please reach out to me at [e-mail]

Author

• Abdur Rahman ([e-mail])

License

MIT