Problem when using with React 16.2.0

[dtouffut]

Hello, your bookstore is great! I love it!
I have a problem using it with react in version 16.2.0
At the creation of new toasts, this one will recreate each time new div parent. What is hugely cluttering the DOM and is not really clean ... Do you have a solution? Thank you in advance!

[Carlos Roso]

Thanks for letting me know! Can you please post here the code you're using to display Notyf in your project?

Maybe you're creating a new Notyf instance every time, which is undesired. I can also investigate if that's the issue on my side.

For now please share some code. That'll help me triage better. Thanks!

[dtouffut]

With pleasure! At first I have this function below in which I pass a parameter and which allows me to make the toasts

showAlert(action) {
		const notyf = new Notyf({
			position: {
			  x: 'right',
			  y: 'top',
			},
			types: [
			  {
				type: 'success',
				background: 'green',
				duration: 5000,
				dismissible: true
			  },
			  {
				type: 'error',
				background: 'indianred',
				message: 'L\'élément a bien été supprimé',
				duration: 5000,
				dismissible: true
			  },
			  {
				type: 'info',
				background: '#04d9fb',
				message: 'Copié !',
				duration: 5000,
				dismissible: true
			  }
			]
		});

		switch (action) {
			case 'supprimer':
				notyf.open({
					type: 'error'
				})
				break;
			case 'ajouter':
				notyf.open({
					type: 'success',
					message: 'Favori ajouté avec succès'
				})
				break;
			case 'modifier':
					notyf.open({
						type: 'success',
						message: 'Modifications enregistrées'
					})
					break;
			case 'copier':
				notyf.open({
					type: 'info'
				})			
				break;
			default:
				break;
		}
}

Then I use a render function to create a context menu where I call different types of toats according to actions

renderMenuContextFavs() {
		var nom= this.state.selectnom;
		var url= this.state.selecturl;
		return (
			<ContextMenu id={"menucontextfav-"} className="context-menu">
				<MenuItem onClick={() => this.setEditFav(nom, url)} className="context-menu-item">
					<i className="fas fa-edit"></i>&nbsp;&nbsp;
					Editer
				</MenuItem>
				<MenuItem onClick={() => this.deleteFav(nom)} className="context-menu-item">
					<i className="fas fa-trash-alt"></i>&nbsp;&nbsp;
					Supprimer
				</MenuItem>
				<MenuItem className="context-menu-item" onClick={() => this.showAlert('copier')}>
					<CopyToClipboard text={this.changeUrl(url)}>
						<div>
							<i className="fas fa-copy"></i>&nbsp;&nbsp;
							Copier
						</div>
					</CopyToClipboard>
				</MenuItem>
				<MenuItem className="context-menu-item">
					<a href={url} target="_blank" className="opentab-contextmenu"><i className="fas fa-external-link-alt"></i>&nbsp;&nbsp; Nouvel Onglet</a>
				</MenuItem>
			</ContextMenu>
		);
	}

The problem could be: that each contextual menu being a different instance instantiates so different toasts each time ...?
I will dig a little more in this direction, thank you!

[dtouffut]

I just solved my problem, so that the Notyf const is usable in all my component in one single instance I declared it and exported it like this before the class component:

export const notyf = new Notyf({...})

Thank you very much for your orientation, you helped me again I really like your library