WIP: add confetti sandbox

package.json

@@ -61,6 +61,7 @@
   ],
   "dependencies": {
     "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react-dom": "^17.0.2",
+    "react-hook-form": "^7.17.2"
   }
 }

site/ColorsSelect.tsx

@@ -0,0 +1,44 @@
+import React from 'react'
+
+
+interface IProps {
+  // TODO add typings
+  fields: any,
+  register: any,
+  append: any,
+  remove: any,
+  colors: string[],
+}
+
+function ColorsSelect(props: IProps): JSX.Element {
+  const { fields, register, append, remove, colors } = props
+
+  function onAddColorClick(event: React.MouseEvent<HTMLButtonElement>): void {
+    event.preventDefault()
+
+    // TODO: randomize new color!
+    append({ value: '#ff12ab' })
+  }
+
+  function onDeleteButtonClick(event: React.MouseEvent<HTMLButtonElement>, colorIndex: number) {
+    event.preventDefault()
+
+    remove(colorIndex)
+  }
+
+  return (
+    <div>
+      {fields.map((field, index: number) => (
+        <div className="color-input-wrapper">
+          <span className="color-input-color-preview" style={{ backgroundColor: colors[index].value }} />
+          <input {...register(`colors.${index}.value`)} key={field.id} />
+          <button onClick={(event) => onDeleteButtonClick(event, index)}>DELETE</button>
+        </div>
+      ))}
+
+      <button onClick={onAddColorClick}>Add More Colors!</button>
+    </div>
+  )
+}
+
+export default ColorsSelect

site/index.tsx

@@ -1,10 +1,12 @@
 import ReactDOM from 'react-dom'
 import React, { useCallback, useEffect, useRef } from 'react'
+import { useForm, useFieldArray } from 'react-hook-form'
 
 import JSConfetti from '../src/index'
 import { generateRandomArrayElement  } from '../src/generateRandomArrayElement'
 import { IAddConfettiConfig } from '../src/types'
 
+import ColorsSelect from './ColorsSelect'
 
 const CONFETTI_ARGS: IAddConfettiConfig[] = [
   {},
@@ -25,8 +27,29 @@ const CONFETTI_ARGS: IAddConfettiConfig[] = [
 ]
 
 
+// TODO: randomize default values
+const defaultValues = {
+  confettiNumber: 50,
+  confettiRadius: 20,
+  useEmoji: false,
+  emojis: ['🌈', '⚡️', '💥', '✨', '💫', '🦄'].join(' '),
+  colors: ['#9b5de5', '#f15bb5', '#fee440', '#00bbf9', '#00f5d4'].map((color) => ({ value: color })),
+}
+
+
 function App(): JSX.Element {
   const jsConfettiRef = useRef<JSConfetti>()
+  const { register, handleSubmit, watch, control } = useForm({ defaultValues })
+
+  // TODO implement add / remove
+  const { fields, append, remove } = useFieldArray({
+    control, // control props comes from useForm (optional: if you are using FormContext)
+    name: 'colors", // unique name for your Field Array
+    // keyName: "id", default to "id", you can change the key name
+  })
+
+  const watchUseEmoji = watch('useEmoji')
+  const watchColors = watch('colors')
 
   useEffect(() => {
     jsConfettiRef.current = new JSConfetti()
@@ -40,16 +63,80 @@ function App(): JSX.Element {
     return () => clearTimeout(timeoutId)
   }, [])
 
-  const onButtonClick = useCallback(() => {
+  const onSubmit = useCallback((formData) => {
+    const { confettiNumber, confettiRadius, useEmoji, emojis, colors } = formData
     if (jsConfettiRef.current) {
-      jsConfettiRef.current.addConfetti(generateRandomArrayElement(CONFETTI_ARGS))
+      const addConfettiArgs = {
+        confettiNumber,
+        confettiRadius,
+      }
+
+      // TODO: fix typescript
+      if (useEmoji) {
+        addConfettiArgs.emojis = emojis.split(' ')
+      } else {
+        addConfettiArgs.confettiColors = colors.map(({ value }) => value)
+      }
+
+      jsConfettiRef.current.addConfetti(addConfettiArgs)
     }
   }, [jsConfettiRef])
 
   return (
-    <>
-      <button className="button" onClick={onButtonClick}>Click me!</button>
-    </>
+    <form className="sandbox-form" onSubmit={handleSubmit(onSubmit)}>
+      <button className="button" type="submit">Fire Confetti!</button>
+
+      <div>
+        <label htmlFor="confettiNumberSelect">Confetti Number: </label>
+        <input
+          id="confettiNumberSelect"
+          type="number"
+          min="1"
+          max="1000"
+          {...register('confettiNumber', { required: true })}
+        />
+      </div>
+
+      <div>
+        <label htmlFor="confettiRadiusSelect">Confetti Radius: </label>
+        <input
+          id="confettiRadiusSelect"
+          type="number"
+          min="1"
+          max="1000"
+          {...register('confettiRadius', { required: true })}
+        />
+      </div>
+
+      <div>
+        <label htmlFor="useEmojiCheckbox">Use Emoji: </label>
+        <input
+          id="useEmojiCheckbox"
+          type="checkbox"
+          {...register('useEmoji')}
+        />
+      </div>
+
+      {watchUseEmoji ? (
+        <div>
+          <label htmlFor="emojisSelect">Add emojies separeted by space: </label>
+          <input
+            id="emojisSelect"
+            type="string"
+            {...register('emojis', { required: true })}
+          />
+        </div>
+      ) : (
+        // TODO rename fields
+        <ColorsSelect
+          register={register}
+          fields={fields}
+          colors={watchColors}
+          append={append}
+          remove={remove}
+        />
+      )}
+    </form>
   )
 }
 

static/styles.css

@@ -22,6 +22,13 @@ body {
   justify-content: center;
 }
 
+.sandbox-form {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
 .button {
   /* reset button styles */
   all: initial;
@@ -46,3 +53,18 @@ body {
 .button:active {
   background-color: #d21e99;
 }
+
+/* --------------------------------------------- */
+/* Color select                                  */
+/* --------------------------------------------- */
+.color-input-wrapper {
+  display: flex;
+  align-items: center;
+}
+
+.color-input-color-preview {
+  width: 15px;
+  height: 15px;
+  margin-right: 5px;
+  border-radius: 3px;
+}

yarn.lock

@@ -4708,6 +4708,11 @@ react-dom@^17.0.2:
     object-assign "^4.1.1"
     scheduler "^0.20.2"
 
+react-hook-form@^7.17.2:
+  version "7.17.2"
+  resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.17.2.tgz#235f15bb65c13e7a1198d33f2db24bcc9e27b303"
+  integrity sha512-oBaHwlYnbpzSFdNrs43QpcM+K2A0kUeNjV86ECYkCimlR1Ctl+tz4oQQd9plfGYkO7PJGLVMOVpUtL5EHjAcYQ==
+
 react@^17.0.2:
   version "17.0.2"
   resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037"