ForwardRef

src/ReactConfetti.tsx

@@ -1,13 +1,22 @@
 import React, { Component, CanvasHTMLAttributes } from 'react'
 import Confetti, { IConfettiOptions, confettiDefaults } from './Confetti'
 
-export type Props = Partial<IConfettiOptions> & CanvasHTMLAttributes<HTMLCanvasElement>
+export type Ref = HTMLCanvasElement
+
+export type Props = Partial<IConfettiOptions> & CanvasHTMLAttributes<HTMLCanvasElement> & {
+  canvasRef: React.RefObject<HTMLCanvasElement>
+}
 
 export class ReactConfetti extends Component<Props> {
   static readonly defaultProps = {
     ...confettiDefaults,
   }
 
+  constructor(props: Props, ...rest: any[]) {
+    super(props, ...rest)
+    this.canvas = props.canvasRef || React.createRef<HTMLCanvasElement>()
+  }
+
   canvas: React.RefObject<HTMLCanvasElement> = React.createRef()
   confetti?: Confetti
 
@@ -53,19 +62,28 @@ export class ReactConfetti extends Component<Props> {
   }
 }
 
-function extractCanvasProps(props: Partial<IConfettiOptions> | any): [Partial<IConfettiOptions>, Partial<CanvasHTMLAttributes<HTMLCanvasElement>>] {
+interface Refs {
+  [key: string]: React.Ref<HTMLElement>
+}
+function extractCanvasProps(props: Partial<IConfettiOptions> | any): [Partial<IConfettiOptions>, Partial<CanvasHTMLAttributes<HTMLCanvasElement>>, Refs] {
   const confettiOptions: Partial<IConfettiOptions> = {}
+  const refs: Refs = {}
   const rest: any = {}
   const confettiOptionKeys = [...Object.keys(confettiDefaults), 'confettiSource', 'drawShape', 'onConfettiComplete']
+  const refProps = ['canvasRef']
   for(const prop in props) {
     const val = props[prop as string]
     if(confettiOptionKeys.includes(prop)) {
       confettiOptions[prop as keyof IConfettiOptions] = val
+    } else if(refProps.includes(prop)) {
+      refProps[prop as any] = val
     } else {
       rest[prop] = val
     }
   }
-  return [confettiOptions, rest]
+  return [confettiOptions, rest, refs]
 }
 
-export default ReactConfetti
+export default React.forwardRef<Ref, Props>((props, ref) => (
+  <ReactConfetti canvasRef={ref} {...props} />
+))

stories/SizedConfetti.jsx

@@ -3,13 +3,14 @@ import useWindowSize from 'react-use/lib/useWindowSize'
 
 import ReactConfetti from '../src/ReactConfetti'
 
-export default (passedProps) => {
+export default React.forwardRef((passedProps, ref) => {
   const { width, height } = useWindowSize()
   return (
     <ReactConfetti
       width={width}
       height={height}
       {...passedProps}
+      ref={ref}
     />
   )
-}
+})

stories/mouse-rain.story.jsx

@@ -0,0 +1,38 @@
+import React, { useRef, useEffect } from 'react'
+import { storiesOf } from '@storybook/react'
+import useMouse from 'react-use/lib/useMouse'
+import SizedConfetti from './SizedConfetti'
+
+const MouseRain = () => {
+  const ref = useRef(null)
+  const { docX } = useMouse(ref)
+  const activeProps = docX ? {
+    confettiSource: {
+      w: 0,
+      h: 0,
+      x: docX,
+      y: 0,
+    },
+  } : {
+    run: false,
+  }
+  return (
+    <>
+      <p style={{ textAlign: 'center', fontFamily: 'sans-serif', color: '#999', margin: '20%' }}>Move your mouse</p>
+      <SizedConfetti
+        style={{ pointerEvents: 'none' }}
+        numberOfPieces={100}
+        ref={ref}
+        gravity={0.5}
+        {...activeProps}
+      />
+    </>
+  )
+}
+
+storiesOf('Props|Demos', module)
+  .add('Mouse Rain', () => (
+    <MouseRain />
+  ), {
+    notes: 'Illustrates how to manipulating the `confettiSource` `Rect`.',
+  })

yarn.lock

@@ -4054,7 +4054,7 @@ debug@^4.0.0, debug@^4.0.1, debug@^4.1.0:
   dependencies:
     ms "^2.1.1"
 
-debuglog@*, debuglog@^1.0.1:
+debuglog@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/debuglog/-/debuglog-1.0.1.tgz#aa24ffb9ac3df9a2351837cfb2d279360cd78492"
   integrity sha1-qiT/uaw9+aI1GDfPstJ5NgzXhJI=
@@ -6026,7 +6026,7 @@ import-local@^2.0.0:
     pkg-dir "^3.0.0"
     resolve-cwd "^2.0.0"
 
-imurmurhash@*, imurmurhash@^0.1.4:
+imurmurhash@^0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/imurmurhash/-/imurmurhash-0.1.4.tgz#9218b9b2b928a238b13dc4fb6b6d576f231453ea"
   integrity sha1-khi5srkoojixPcT7a21XbyMUU+o=
@@ -6902,11 +6902,6 @@ lodash-es@^4.17.11:
   resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.11.tgz#145ab4a7ac5c5e52a3531fb4f310255a152b4be0"
   integrity sha512-DHb1ub+rMjjrxqlB3H56/6MXtm1lSksDp2rA2cNWjG8mlDUYFhUj3Di2Zn5IwSU87xLv8tNIQ7sSwE/YOX/D/Q==
 
-lodash._baseindexof@*:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/lodash._baseindexof/-/lodash._baseindexof-3.1.0.tgz#fe52b53a1c6761e42618d654e4a25789ed61822c"
-  integrity sha1-/lK1OhxnYeQmGNZU5KJXie1hgiw=
-
 lodash._baseuniq@~4.6.0:
   version "4.6.0"
   resolved "https://registry.yarnpkg.com/lodash._baseuniq/-/lodash._baseuniq-4.6.0.tgz#0ebb44e456814af7905c6212fa2c9b2d51b841e8"
@@ -6915,33 +6910,11 @@ lodash._baseuniq@~4.6.0:
     lodash._createset "~4.0.0"
     lodash._root "~3.0.0"
 
-lodash._bindcallback@*:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/lodash._bindcallback/-/lodash._bindcallback-3.0.1.tgz#e531c27644cf8b57a99e17ed95b35c748789392e"
-  integrity sha1-5THCdkTPi1epnhftlbNcdIeJOS4=
-
-lodash._cacheindexof@*:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/lodash._cacheindexof/-/lodash._cacheindexof-3.0.2.tgz#3dc69ac82498d2ee5e3ce56091bafd2adc7bde92"
-  integrity sha1-PcaayCSY0u5ePOVgkbr9Ktx73pI=
-
-lodash._createcache@*:
-  version "3.1.2"
-  resolved "https://registry.yarnpkg.com/lodash._createcache/-/lodash._createcache-3.1.2.tgz#56d6a064017625e79ebca6b8018e17440bdcf093"
-  integrity sha1-VtagZAF2JeeevKa4AY4XRAvc8JM=
-  dependencies:
-    lodash._getnative "^3.0.0"
-
 lodash._createset@~4.0.0:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/lodash._createset/-/lodash._createset-4.0.3.tgz#0f4659fbb09d75194fa9e2b88a6644d363c9fe26"
   integrity sha1-D0ZZ+7CddRlPqeK4imZE02PJ/iY=
 
-lodash._getnative@*, lodash._getnative@^3.0.0:
-  version "3.9.1"
-  resolved "https://registry.yarnpkg.com/lodash._getnative/-/lodash._getnative-3.9.1.tgz#570bc7dede46d61cdcde687d65d3eecbaa3aaff5"
-  integrity sha1-VwvH3t5G1hzc3mh9ZdPuy6o6r/U=
-
 lodash._root@~3.0.0:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/lodash._root/-/lodash._root-3.0.1.tgz#fba1c4524c19ee9a5f8136b4609f017cf4ded692"
@@ -7002,11 +6975,6 @@ lodash.pick@^4.4.0:
   resolved "https://registry.yarnpkg.com/lodash.pick/-/lodash.pick-4.4.0.tgz#52f05610fff9ded422611441ed1fc123a03001b3"
   integrity sha1-UvBWEP/53tQiYRRB7R/BI6AwAbM=
 
-lodash.restparam@*:
-  version "3.6.1"
-  resolved "https://registry.yarnpkg.com/lodash.restparam/-/lodash.restparam-3.6.1.tgz#936a4e309ef330a7645ed4145986c85ae5b20805"
-  integrity sha1-k2pOMJ7zMKdkXtQUWYbIWuWyCAU=
-
 lodash.set@^4.3.2:
   version "4.3.2"
   resolved "https://registry.yarnpkg.com/lodash.set/-/lodash.set-4.3.2.tgz#d8757b1da807dde24816b0d6a84bea1a76230b23"
@@ -9568,7 +9536,7 @@ readable-stream@~1.1.10:
     isarray "0.0.1"
     string_decoder "~0.10.x"
 
-readdir-scoped-modules@*, readdir-scoped-modules@^1.0.0:
+readdir-scoped-modules@^1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/readdir-scoped-modules/-/readdir-scoped-modules-1.0.2.tgz#9fafa37d286be5d92cbaebdee030dc9b5f406747"
   integrity sha1-n6+jfShr5dksuuve4DDcm19AZ0c=