fkhadra / react-toastify-doc Goto Github PK

Resolved the issue where the auto close feature on toasts was not working as intended

https://fkhadra.github.io/react-toastify/introduction/CONTRIBUTING.md

The contribute link on the introduction page is copy-pasted from the main repo's README, and because there's no CONTRIBUTING.md file under the docs directory, Docusaurus returns 404.

I would like to work on this.

I've been trying to use toast.promise but I keep getting the same error, "toast.promise is not a function"

The default code theme of the code snippets (in light theme) doesn't show the Copy badge on the top right corner, but shows a black box with no badge text in it. However, it shows up in dark theme as fine.

Reproduce the issue

I've tried opening the site on these browsers, of which I've attached a screenshot of a random codeblock.

• Microsoft Edge
  

• Mozilla Firefox
  

I believe this issue would be the same for all browsers (as it might be rendering the same theme everywhere)

Possible fixes

I think it can be solved if we add a different code theme for light mode than using same for both dark and light modes.

The PR fkhadra/react-toastify#220 enabled setting the toast id manually by passing a toastId prop, but this doesn't seem to be reflected in toast() API docs. Happy to create a PR with a fix if needed.

Using site on Dark mode the elements under dropdown in Option-> Transition is not visible (refer img).

When changing transition, the notification is updated, but the code is not.

Hi, I have found it confusing which variable affects which aspect of the toast container. The names are kind of explicit but my assumptions weren't always right. For instance, I want to change the background color but I am using a theme. Do I use --toastify-color-dark or --toastify-toast-background.

I think it would be super helpful to label an image with what is where or at least add some comments to https://fkhadra.github.io/react-toastify/how-to-style/#override-css-variables to generally explain what they affect. Or add the variables to the playground so we can fool with them there to see what they do?

such as the title

The example here assumes context param is an object but is possibly undefined.

// type doesn't exist on type { //... } | undefined
toastClassName={({ type }) => contextClass[type || "default"] +
  " relative flex p-1 min-h-10 rounded-md justify-between overflow-hidden cursor-pointer"
}

Add basic example code on the installation page instead of having to watch a 10 minute video. Also means that less mistakes will be made, even when using said video, so that you can copy and paste the basics easily.

The CSS class code on the example page appears to be invalid.
https://fkhadra.github.io/react-contexify/how-to-style

The class on the example page differs from the css class written in the source code.

/* exmaple class on the example page */

.contexify__item {
    border: 1px solid red; /* Not Working */
}

.contexify_item {
    border: 1px solid red; /* Working */
}