React Toastify Migration

Migrating from cogo-toast to react-toastify

We are transitioning from cogo-toast to react-toastify because cogo-toast no longer supports React 18 and hasn't been updated in over five years. React-toastify offers better support and ongoing maintenance, ensuring compatibility with newer React versions.

Installation

To install the specific version of react-toastify compatible with our project:

yarn add react-toastify@10.0.6 -E -W

Automated Migration

We provide a codemod script to automate part of the migration process. This script adds the ToastContainer component to the necessary files.

Prerequisites

Install jscodeshift globally if you haven't already:

npm install jscodeshift -g

Running the Codemod

Execute the codemod script:

jscodeshift -t scripts/codemods/add-react-toastify.js apps/starter/pages/_app.jsx apps/starter/.storybook/preview.js packages/console/src/admin.tsx

The script will modify these files:

  • apps/starter/pages/_app.jsx
  • apps/starter/.storybook/preview.js
  • packages/console/src/admin.tsx
⚠️
make sure to change starter with your workspace name

Manual Migration Steps

After running the codemod script, you'll need to manually replace instances of cogo-toast in your codebase.

1. Identify cogo-toast Usage

Look for imports like:

import cogoToast from "cogo-toast"
// or
import toast from "cogo-toast"

2. Replace Imports and Usage

Update your code as follows:

Before:

import cogoToast from "cogo-toast"


cogoToast.success(`Success`)

After:

import { toast } from "react-toastify"


toast.success(`Success`)

3. Toast Types

Replace these toast methods:

  • cogoToast.success() → toast.success()
  • cogoToast.error() → toast.error()
  • cogoToast.info() → toast.info()
  • cogoToast.warn() → toast.warn()
  • cogoToast.loading() → toast.loading()

Important Notes

Version Compatibility

If you plan to upgrade @vactorynext/core to version 1.0.21 or later:

  • Ensure all instances of cogo-toast are replaced with react-toastify
  • The newer version uses react-toastify in its source code
  • Failing to update may cause compatibility issues

API Differences

Key differences between cogo-toast and react-toastify:

  • react-toastify requires a <ToastContainer /> component in your app
  • Different positioning and styling options
  • More customization options available

Reference

For more detailed examples and implementation details, refer to:

AccessibilityUsing Drone && Docker