Have ideas to improve npm?Join in the discussion! »

    react-native-confetti-cannon
    TypeScript icon, indicating that this package has built-in type declarations

    1.5.2 • Public • Published

    React-native-confetti-cannon

    CircleCI NPM PLATFORMS GITHUB

    Live demo

    🚀 Try yourself on Storybook web version

    Installation

    npm install react-native-confetti-cannon
    # or
    yarn add react-native-confetti-cannon

    Usage

    import ConfettiCannon from 'react-native-confetti-cannon';
    
    const MyComponent = () => (
      <ConfettiCannon count={200} origin={{x: -10, y: 0}} />
    );

    Props

    Name Type Description Required Default
    count number items count to display required
    origin {x: number, y: number} animation position origin required
    explosionSpeed number explosion duration (ms) from origin to top 350
    fallSpeed number fall duration (ms) from top to bottom 3000
    fadeOut boolean make the confettis disappear at the end false
    colors string[] give your own colors to the confettis default colors
    autoStart boolean auto start the animation true
    autoStartDelay number delay to wait before triggering animation 0

    Events

    Name Returns Description Required
    onAnimationStart void callback triggered at animation start
    onAnimationResume void callback triggered at animation resume
    onAnimationStop void callback triggered at animation stop
    onAnimationEnd void callback triggered at animation end

    Methods

    Name Returns Description Required
    start void start the animation programmatically
    resume void resume the animation programmatically
    stop void stop the animation programmatically

    For example:

    import ConfettiCannon from 'react-native-confetti-cannon';
    
    class MyComponent extends React.PureComponent {
      explosion;
    
      handleSomeKindOfEvent = () => {
        this.explosion && this.explosion.start();
      };
    
      render() {
        return (
          <ConfettiCannon
            count={200}
            origin={{x: -10, y: 0}}
            autoStart={false}
            ref={ref => (this.explosion = ref)}
          />
        );
      }
    }

    Examples

    Deep into the example folder to see the stories and run:

    npm install && npm start

    And choose one of the following Expo commands:

    • i: open in iOS simulator
    • a: open in Android emulator
    • w: open in web browser

    ⚠️ Warning

    It is strongly recommended to use 1.2.0 or higher to avoid this warning introduced in React-Native 0.62:

    Animated: useNativeDriver was not specified. This is a required option and must be explicitly set to true or false

    Install

    npm i react-native-confetti-cannon

    DownloadsWeekly Downloads

    6,020

    Version

    1.5.2

    License

    MIT

    Unpacked Size

    25.2 kB

    Total Files

    12

    Last publish

    Collaborators

    • avatar