Migrating to 0.4

Version 0.4 splits @opengovsg/confetti into two entry points. The package root now exports only the drop-in templates, the trigger wrapper, and the visibility hooks. Every other export moves to a new @opengovsg/confetti/components subpath. This is the only breaking change in 0.4. If you use the drop-in templates, no code changes are needed.

Update the package

npm install @opengovsg/confetti@^0.4.0
# or
pnpm add @opengovsg/confetti@^0.4.0
# or
yarn add @opengovsg/confetti@^0.4.0

Are you affected?

Whether you need to change anything depends on what you import from @opengovsg/confetti.

No changes needed if you only import these from the package root. They still export from @opengovsg/confetti:

• Drop-in templates: EmbeddedConfetti, ModalConfetti, PopoverConfetti, StepperConfetti
• Trigger wrapper: ConfettiTrigger
• Visibility hooks: useVisibleAfterDelay, useVisibleAfterScroll, useVisibleAfterPageVisits, useVisibleAfterSessionPageVisits

You must update your imports if you import any building block from the package root. These now live at @opengovsg/confetti/components:

• Providers and state: ConfettiProvider, ConfettiController, ConfettiContext, useConfetti
• Question components: SurveyQuestionFactory, Rating, FreeText, SingleChoice, MultiChoice, Statement
• Containers: ModalContainer, PopoverContainer
• Presentations: Embed, Flow
• Other building blocks: Confetti, CloseButton, ThankYouMessage, ConfettiTriggerIcon, DefaultConfettiTrigger

Building blocks move to /components

Only the import path changes. The names, props, and behaviour are unchanged.

Before (0.3):

import {
  ConfettiProvider,
  Flow,
  Rating,
  useConfetti,
} from '@opengovsg/confetti'

After (0.4):

import {
  ConfettiProvider,
  Flow,
  Rating,
  useConfetti,
} from '@opengovsg/confetti/components'

If one file imports both a drop-in template and a building block, split the import across the two entry points:

// After (0.4)
import { PopoverConfetti } from '@opengovsg/confetti'
import { ConfettiProvider, useConfetti } from '@opengovsg/confetti/components'

The rest of your component code stays the same:

import {
  ConfettiController,
  ConfettiProvider,
} from '@opengovsg/confetti/components'

const App = () => (
  <ConfettiProvider
    surveyId="<your-survey-id>"
    publishableKey="<your-publishable-key>"
  >
    <ConfettiController>
      {({ submit, isCompleted }) => (
        <button onClick={submit} disabled={isCompleted}>
          Submit
        </button>
      )}
    </ConfettiController>
  </ConfettiProvider>
)

No changes needed for drop-in templates

If you embed the widget with a drop-in template such as PopoverConfetti or ModalConfetti, your imports keep working with no edits.

// Works in both 0.3 and 0.4, no change required
import { PopoverConfetti, useVisibleAfterDelay } from '@opengovsg/confetti'

Need help?

• See when to show the survey for examples that use the building blocks.
• Email confetti@open.gov.sg
• Slack #confetti (internal use only)