react-waving-hand

Add smoothly animated waving hand to your react project in just a minute.

Installation

npm i @tensaye-yuan/react-waving-hand

# via yarn
yarn add @tensaye-yuan/react-waving-hand

# via pnpm
pnpm add @tensaye-yuan/react-waving-hand

Example

import { WavingHand } from '@tensaye-o/react-waving-hand'
import '@tensaye-yuan/react-waving-hand/dist/index.css'

// in jsx
const Greetings = () => (
  <h3>
    Hi there <WavingHand loop={2} motion={true} size='1.25rem' type={2} />
  </h3>
)

Documentation

Check out the live demo.

Properties

Property	Type	Remarks
size	string	Optional. Same as the css style property fontSize. Default value "1rem".
type	1 | 2 | 3 | 4 | 5 | 6	Optional. Based on Fitzpatrick scale. Default value 3.
motion	boolean	Optional. When set to true, the animation will be turned on with infinite iteration. Default value false.
loop	number && >=0	Optional. loop needs to be an integer which is over -1, meanwhile it has runtime typechecking for number values. If the value is 0 and motion opened, animation iteration will be infinite. Default value 0.
others	HTMLAttributes<HTMLSpanElement>	Attributes inherit from span element.