Animated likes counter

Overview

Demo

Live demo page

likes.mov

Supports

React v17.0.2

Installation

npm i animated-likes-counter

Usage

React

<LikeButtonAnimated />

Style

.block {
  --lba-c-icon-idle: var(--your-color-1);
  --lba-c-icon-hover: var(--your-color-2);
  --lba-c-accent: var(--your-color-3);
  --lba-c-bg: var(--your-color-4);
}

API

Props	Value	Description
disabledButton	boolean	Makes the button inactive
handleLike	function	The like event handler is triggered at the end of the flight animation
projectile	String / JSX	The jumping element
likes	String / JSX	Counter
style	object {countTextActiveColor: String}	Props for customize some element styles some
classes	object {root: String, icon: String, countText: String}	Props for customize some element classNames some

Example

function App() {
  const [count, setCount] = useState(0);

  return (
    <div className="App">
      <LikeButtonAnimated
        disabledButton={false}
        handleLike={() => setCount((a) => a + 1)}
        likes={count}
        projectile='+1'
        classes={{icon: 'my-class'}}
      />
    </div>
  );
}

Author

Maksim "Amedomary" Grishin, Irlix IT Company