ReactでClap(拍手)ボタンを導入したいの巻

MediumにはClap(拍手)という機能がありまして、個人的にはこの機能がとてもお気に入りです。 特に何度も拍手できるというのがやってて気分がいいです。

多分ReactのUIで誰かこういうボタンを実装しているだろうな🤔 という感じはしたので、調査したところありました。

react clap button

使い方

インストール

$ npm install react-clap-button --save

利用方法

import ClapButton from 'react-clap-button';

// 基本的な使い方

<ClapButton />

// props指定

<ClapButton maxCount={50} countTotal={5005} size={24} />

以下のようにStyled Componentsを利用して、UIの調整をすることもできます。

import { ThumbsUp } from 'react-feather';
import ClapButton from 'react-clap-button';

import styled, { css } from 'styled-components';


const CustomIcon = styled(ThumbsUp)`
  stroke: ${({ theme: { secondaryColor } }) => secondaryColor};
  stroke-width: 1px;
  fill: none;
  ${({isClicked, theme: {secondaryColor}}) => isClicked && css`
      fill: ${secondaryColor};
    `};

<ClapButton
  iconComponent={props => <CustomIcon {...props} />}
/>

おまけ

ちなみに、これ以外にもApplause Button というプロジェクトもあります。

こちらも時間がある時にでも試してみたいところですね。

Next: