Toast totalmente customizable con react-hot-toast

Toast totalmente customizable con react-hot-toast

Hoy les presento una librería de react para generar toast totalmente customizables. Sí, sí, ya lo sé, me van a decir que existen cientos de librerías, pero lo bueno que tiene la misma, es que pesa solamente 5kb (incluyendo estilos).

01 Creando la app

npx create-react-app my-toast

cd my-toast

02 Instalación

npm i react-hot-toast

03 Codeando

import toast, { Toaster } from "react-hot-toast";

const notify = () =>
  toast("Lorem Ipsum", {
    icon: "🎧",
    style: {
      border: "1px solid #4daf7c",
      padding: "16px",
    },
  });

function App() {
  return (
    <div className="App">
      <button onClick={notify}>Test</button>
      <Toaster />
    </div>
  );
}

export default App;

04 Ejecutando el código

npm start