diff --git a/README.md b/README.md index b8a5995..f78a233 100644 --- a/README.md +++ b/README.md @@ -24,9 +24,11 @@ const MyComponent = () => ( ## 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 | +| 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 | Array | give your own colors to the confettis | | default colors | diff --git a/src/components/confetti.js b/src/components/confetti.js index 0c2d50c..91191cb 100644 --- a/src/components/confetti.js +++ b/src/components/confetti.js @@ -8,34 +8,24 @@ import {randomValue} from '../utils'; type Props = {| left: Animated.Interpolation, bottom: Animated.Interpolation, - transform: Array<{ [key: string]: Animated.Interpolation }> + transform: Array<{ [key: string]: Animated.Interpolation }>, + color: string, + opacity: Animated.Interpolation, |}; -const colors: Array = [ - '#e67e22', - '#2ecc71', - '#3498db', - '#84AAC2', - '#E6D68D', - '#F67933', - '#42A858', - '#4F50A2', - '#A86BB7', - '#e74c3c', - '#1abc9c' -]; + class Confetti extends React.PureComponent { props: Props; width: number = randomValue(8, 16); height: number = randomValue(6, 12); isRounded: boolean = Math.round(randomValue(0, 1)) === 1; - backgroundColor: string = colors[Math.round(randomValue(0, colors.length - 1))]; + backgroundColor: string = this.props.color; render() { - const { left, bottom, transform } = this.props; + const { left, bottom, transform, opacity } = this.props; const { width, height, isRounded, backgroundColor } = this; - const style = { left, bottom, width, height, backgroundColor, transform }; + const style = { left, bottom, width, height, backgroundColor, transform, opacity}; return ( diff --git a/src/index.js b/src/index.js index bb3436c..8f72e77 100644 --- a/src/index.js +++ b/src/index.js @@ -13,7 +13,9 @@ type Props = {| y: number }, explosionSpeed?: number, - fallSpeed?: number + fallSpeed?: number, + colors?: Array, + fadeOut?: boolean |}; type Item = {| @@ -32,6 +34,19 @@ type State = {| |}; const TOP_MIN = 0.7; +const DEFAULT_COLORS: Array =[ + '#e67e22', + '#2ecc71', + '#3498db', + '#84AAC2', + '#E6D68D', + '#F67933', + '#42A858', + '#4F50A2', + '#A86BB7', + '#e74c3c', + '#1abc9c' +]; class Explosion extends React.PureComponent { props: Props; @@ -88,9 +103,9 @@ class Explosion extends React.PureComponent { }; render() { - const { origin } = this.props; + const { origin, colors = DEFAULT_COLORS, fadeOut } = this.props; const { height, width } = Dimensions.get('window'); - + return ( {this.state && this.state.items && this.state.items.map((item: Item, index: number) => { @@ -118,10 +133,16 @@ class Explosion extends React.PureComponent { inputRange: [0, 0.4, 1.2, 2], outputRange: [0, -(item.swingDelta * 30), (item.swingDelta * 30), 0] }) + + const opacity = this.animation.interpolate({ + inputRange: [0, 1, 1.8, 2], + outputRange: [1, 1, 1, fadeOut ? 0 : 1] + }); + const transform = [{rotateX}, {rotateY}, {rotateZ}, {translateX}]; return ( - + ); })}