Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Bump react-toastify from 10.0.6 to 11.0.2 #58

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Bump react-toastify from 10.0.6 to 11.0.2 #58

wants to merge 1 commit into from

Conversation

dependabot[bot]
Copy link
Contributor

@dependabot dependabot bot commented on behalf of github Dec 23, 2024 •
edited by sourcery-ai bot
Loading

Bumps react-toastify from 10.0.6 to 11.0.2.

Release notes

Sourced from react-toastify's releases.

v11

What is new in v11

I’m super excited about this release! The main focus was on customization, and my goal was to empower you (and myself) so you can fully personalize the look and feel for the notifications.

In short, react-toastify should be able to blend into any design system.

Screenshot 2024-12-12 at 22 21 52

No need to import the css file anymore

The stylesheet is now injected automatically, so you no longer need to import it. The CSS file is still exported by the library.

  import { ToastContainer, toast } from 'react-toastify';
function App(){
const notify = () => toast("Wow so easy !");
return (
  <div>
    <button onClick={notify}>Notify !</button>
    <ToastContainer />
  </div>
);

}

Easy customization!

One of the top requests has been how to customize notifications. To be fair, until this release, it was quite challenging because it required users to override numerous CSS classes.

I’ve simplified the DOM structure of the notification by removing extraneous div elements, nested elements, etc... It’s a significant breaking change, but it’s truly worth the effort. I can confidently say that the library can now seamlessly integrate into any design system.

Below, I’ve implemented a couple of different designs using only Tailwind. I didn’t override a single CSS class from react-toastify 🤯!

Screenshot 2024-12-12 at 22 21 52

[!NOTE]
Head to stackblitz to check the code.

How does it work in practice? On the left side, we have the old DOM structure vs the new one on the right side.

noti-struct

  • Toastify__toast-body and its child are now completely gone.
  • The CloseButton now uses an absolute position.

Thanks to those changes, nothing will interfere with your content.

... (truncated)

Commits

Dependabot compatibility score

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:

  • @dependabot rebase will rebase this PR
  • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
  • @dependabot merge will merge this PR after your CI passes on it
  • @dependabot squash and merge will squash and merge this PR after your CI passes on it
  • @dependabot cancel merge will cancel a previously requested merge and block automerging
  • @dependabot reopen will reopen this PR if it is closed
  • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
  • @dependabot show <dependency name> ignore conditions will show all of the ignore conditions of the specified dependency
  • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
  • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
  • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)

Summary by Sourcery

Build:

  • Update react-toastify dependency from version 10.0.6 to 11.0.2 in package.json.

@dependabot
Bump react-toastify from 10.0.6 to 11.0.2
b0228e2 
Bumps [react-toastify](https://github.com/fkhadra/react-toastify) from 10.0.6 to 11.0.2.
- [Release notes](https://github.com/fkhadra/react-toastify/releases)
- [Commits](fkhadra/react-toastify@v10.0.6...v11.0.2)

---
updated-dependencies:
- dependency-name: react-toastify
  dependency-type: direct:production
  update-type: version-update:semver-major
...

Signed-off-by: dependabot[bot] <support@github.com>
@dependabot dependabot bot added the dependencies Pull requests that update a dependency file label Dec 23, 2024
@sourcery-ai Sourcery AI
Copy link

sourcery-ai bot commented Dec 23, 2024 •
edited
Loading

Reviewer's Guide by Sourcery

This pull request updates the react-toastify library from version 10.0.6 to 11.0.2. The update includes significant changes in the library, such as automatic CSS injection, simplified DOM structure for easier customization, and removal of unnecessary elements. These changes aim to enhance customization and integration with design systems.

Sequence diagram showing simplified toast usage in v11

sequenceDiagram
    participant App as Application
    participant Toast as ToastContainer
    participant CSS as Automatic CSS
    Note over App,CSS: No manual CSS import needed
    App->>Toast: Import ToastContainer
    CSS-->>Toast: Auto-inject styles
    App->>Toast: Create toast notification
    Toast->>Toast: Render with simplified DOM
    Note over Toast: Direct content rendering<br/>without extra wrappers
Loading

Class diagram showing react-toastify v11 structure changes

classDiagram
    class ToastContainer {
        +render()
    }
    class Toast {
        +content: ReactNode
        +closeButton: ReactNode
    }
    class CloseButton {
        +position: absolute
    }
    ToastContainer --> Toast
    Toast --> CloseButton
    note for Toast "Simplified DOM structure
Removed Toastify__toast-body"
Loading

File-Level Changes

Change Details Files
Upgrade react-toastify from version 10.0.6 to 11.0.2
  • Updated the version of react-toastify in package.json
  • Updated the version of react-toastify in package-lock.json
 package.json
package-lock.json
Tips and commands

Interacting with Sourcery

  • Trigger a new review: Comment @sourcery-ai review on the pull request.
  • Continue discussions: Reply directly to Sourcery's review comments.
  • Generate a GitHub issue from a review comment: Ask Sourcery to create an
    issue from a review comment by replying to it.
  • Generate a pull request title: Write @sourcery-ai anywhere in the pull
    request title to generate a title at any time.
  • Generate a pull request summary: Write @sourcery-ai summary anywhere in
    the pull request body to generate a PR summary at any time. You can also use
    this command to specify where the summary should be inserted.

Customizing Your Experience

Access your dashboard to:

  • Enable or disable review features such as the Sourcery-generated pull request
    summary, the reviewer's guide, and others.
  • Change the review language.
  • Add, remove or edit custom review instructions.
  • Adjust other review settings.

Getting Help

sourcery-ai[bot]
sourcery-ai bot reviewed Dec 23, 2024
View reviewed changes
Copy link

@sourcery-ai sourcery-ai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We have skipped reviewing this pull request. It seems to have been created by a bot (hey, dependabot[bot]!). We assume it knows what it's doing!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@sourcery-ai sourcery-ai[bot] sourcery-ai[bot] left review comments

Assignees
No one assigned
Labels
dependencies Pull requests that update a dependency file
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
0 participants