Redwood Flash is being replaced with React Hot Toast: How to update your project (v0.27.0)

Get Help and Help Others
1

Thanks to @rob for writing the guide below!

In Redwood v0.27.0, we replaced our custom Flash stuff with react-hot-toast and updated the scaffold generators to generate with the new interface. Currently, this will output deprecation notices to the browser console letting you know to migrate and that the old Flash API will be gone when we release v1.0.

What’s changed?

Unless you have a super-custom implementation of messaging (where you’re using dismissMessage() and cycleMessage() manually) you actually won’t notice any difference, other than the messages will look different. You’ll get a deprecation in the Web Inspector letting you know that’re dropping <Flash> and addMessage() in v1.0 and to switch over to using <Toaster> and toast().

If you are using dismissMessage() and cycleMessage() they will now be a noop and you’ll just see the deprecation notice.

Updating from Flash to Toaster

This change is fairly easy. Import Toaster and replace instances of <Flash> with <Toaster>:

// before
import { Flash } from '@redwoodjs/web'

const MyPage = () => {
  return (
    <div>
      <Flash />
    </div>
  )
}

// after
import { Toaster } from '@redwoodjs/web/toast'

const MyPage = () => {
  return (
    <div>
      <Toaster />
    </div>
  )
}

Toaster accepts some additional options that Flash did not, including the position of the popup on the page, the order of new messages, and more. See them on the official react-hot-toast docs.

Updating from addMessage() to toast()

// before
import { useFlash } from '@redwoodjs/web'

const MyComponent = () => {
  const { addMessage } = useFlash()

  const create = () => {
    // do something
    addMessage('New record saved!')
  }
}

// after
import { toast } from '@redwoodjs/web/toast'

const MyComponent = () => {
  const create = () => {
    // do something
    toast.success('New record saved!')
  }
}

Note that since toast is not a hook you can use it outside of a component (even outside of React itself, according to the docs!). toast() takes some addition options which you can read about in their docs.

Updating Scaffold Styles

If you have web/src/scaffold.css for styling your scaffolds, there’s one rule you’ll want to change if you want the toast’s icons to display properly:

/* before */
.rw-scaffold *,
.rw-scaffold ::after,
.rw-scaffold ::before {
  box-sizing: inherit;
  border-width: 0;
  border-style: solid;
  border-color: #e2e8f0;
}

/* after */
.rw-scaffold *,
.rw-scaffold ::after,
.rw-scaffold ::before {
  box-sizing: inherit;
}
1 Like
2

Thank you @thedavid for the guide. I faced some difficulty in changing Flash to Toaster but I’m unsure what have I done wrong, could you lend me some help? :pray:

image
image650×649 35 KB

I received the following error once I changed Flash to Toaster :point_down:

image
image883×686 35.8 KB

3

Change
import { Toaster } from '@redwoodjs/web'
to
import { Toaster } from '@redwoodjs/web/toast'

2 Likes
4

Thank you @realStandal it’s working now! :grin::pray:

Sidenote: Linking to the documentation for others to quick access to the Toast Notification documentation.

1 Like
5

Thanks for the help, all!

@rob do we need to update the snippets in the OP?

6

Update: edited original post with correction. Thanks again!

1 Like
7

I finally got around to making this change.

Thanks for the guide.

2 Likes
8

React Hot Toast version 2 is out

This release is all about flexibility. It allows you to create the notification system of your dreams, even simpler. Before we dig deeper into the new APIs, check out what’s included in this release:

1 Like