react-native-medium-clap

Highly Customizable Medium Clap Component for react-native & react-native-web.

Installation

1) Make sure to first install & configure react-native-svg

• https://github.com/react-native-community/react-native-svg#installation

2) Install react-native-medium-clap

npm install react-native-medium-clap

Usage

import MediumClap from 'react-native-medium-clap'


const ClapExample = () => {
  
  const onClapIncrease = (clap) => console.log(`Number of Claps: ${clap}`)

  return (
    <View>
      <MediumClap
        onClapIncrease={onClapIncrease}
        color="07AF6A"
        clapSize={50}
        translateY={30}
        countRadius={15}
        countTextStyle={{ fontSize:16 }}
        maxClapCount={45}
      />
    </View>

  )

}

Configuration

Property	Type	Default	Description
onClapIncrease	function	() => {}	callback function on clap increase
clapSize	number	45	use this to change the size of clap icon
color	string	#07AF6A	use this to change primary color of component
translateY	number	20	use this to change the translation in y direction
maxClapCount	number	50	use this to limit the clap count increase
countRadius	number	20	use this to change the size of count component/circle
countTextStyle	style	{}	use this to apply styles to count text

Showcase

Author

This library is brought to you by Piyush Gupta ( kida007 )

License

MIT