https://github.com/kerams/fable.reacttoastify
Fable bindings for react-toastify
https://github.com/kerams/fable.reacttoastify
fable fable-bindings fsharp toast
Last synced: 10 months ago
JSON representation
Fable bindings for react-toastify
- Host: GitHub
- URL: https://github.com/kerams/fable.reacttoastify
- Owner: kerams
- License: mit
- Created: 2023-06-25T07:46:44.000Z (almost 3 years ago)
- Default Branch: master
- Last Pushed: 2023-06-25T08:35:50.000Z (almost 3 years ago)
- Last Synced: 2025-08-01T01:32:41.035Z (11 months ago)
- Topics: fable, fable-bindings, fsharp, toast
- Language: F#
- Homepage:
- Size: 6.84 KB
- Stars: 3
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Fable.ReactToastify
Fable bindings for [react-toastify](https://github.com/fkhadra/react-toastify) ([NPM package](https://www.npmjs.com/package/react-toastify)) version 9.3.1+.
## Nuget package
[](https://www.nuget.org/packages/Fable.ReactToastify)
## Installation with [Femto](https://github.com/Zaid-Ajaj/Femto)
```
femto install Fable.ReactToastify
```
## Standard installation
Nuget package
```
paket add Fable.ReactToastify -p YourProject.fsproj
```
NPM package
```
npm install react-toastify@9.3.1
```
## Usage
For advanced usage instructions and the complete API see [the official docs](https://fkhadra.github.io/react-toastify/introduction).
```fsharp
open Fable.Core.JsInterop
open Fable.React
open Fable.ReactToastify
// Import the default toast style sheet (or your own) in the application entry point.
// See https://fkhadra.github.io/react-toastify/how-to-style for styling info.
importSideEffects "react-toastify/dist/ReactToastify.css"
// Place the container close to your root.
let view model dispatch =
div [] [
// navbar
// main content
// footer
Toastify.container [ ContainerOption.position Position.BottomRight ]
]
// ... elsewhere in a click handler or update function ...
// Toast-invoking functions return ToastId.
// If you do not intend to dismiss toasts programmatically, you can throw away these values.
// Invoke a succcess toast.
Toastify.success "Done." |> ignore
// Invoke an error that does not close automatically
let toastId = Toastify.error (div [] [ str "I am a more complex React element" ], [ ToastOption.autoClose false ])
// and remove it manually at a later point (unless the user has already dismissed it).
Toastify.dismiss toastId
// Invoke a toast with type decided at run time.
let toastMessage (typ: ToastType) (content: ReactElement) =
Toastify.toast (content, [ ToastOption.``type`` typ ]) |> ignore
```