How to install react-toastr

Question

I installed react-toastr and integrated the example code.

import React from 'react'
import { ToastContainer } from 'react-toastr';
class Notifier extends React.Component
{
  updateNotify()
  {
    this.refs.container.info('hola el mundo');
  }
  render()
  {
    return(
      <ToastContainer ref="container"
      className="toast-top-right" />
    );
  }
}

When I call info() on the container the message pops up, but just as plain text at the top of the page, not as a styled box in the upper right corner. The message also never goes away. So it looks like CSS and JavaScript components are missing.

What did I do wrong? Why those warnings about fsevents when this is being installed under Linux? I'm using react 15 if it matters. I downgraded to react-toastr version 2.9.5 but it didn't make a difference.

$ npm install --save react-toastr
myApp@0.3.1 /home/myApp
└─┬ react-toastr@3.0.0
  └─┬ babel-runtime@6.26.0
    ├── core-js@2.5.3
    └── regenerator-runtime@0.11.1

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules/chokidar/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.0.17 (node_modules/react-scripts/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.0.17: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

Sagiv b.g · Accepted Answer · 2018-02-06T21:30:46.173

3

You need to add the CSS file of toastr

Running example

edited Feb 06 '18 at 21:30

answered Feb 06 '18 at 21:25

Sagiv b.g

30,379
9
68
99

1

Indeed, you are correct. The other missing thing is the animate.css file. It's incredible that something this critical yet trivial is left out of the react-toastr docs. Next step is to understand how to change from the bouncing animation to something more reasonable, but that too is mysteriously undocumented: https://github.com/tomchentw/react-toastr/issues/133 – messy Feb 06 '18 at 21:44
1

As a general rule i follow is: every `react-*` library that is built on top of another library (see `react-bootstrap`, `semantic-ui-react`, etc...) need the `css` files to be provided by you. most `react` libraries are only responsible for the Javascript part. – Sagiv b.g Feb 06 '18 at 21:50
How comes it is without styles? I make `npm i react-toastr`, what else I need to use it? (actually, nothing...) – Ilia May 04 '18 at 13:42
2

In `node_modules/react-toastr/src/docs/configuration.md` you'll find the references to the css that you need. – Ludder Jul 26 '18 at 15:15

How to install react-toastr

1 Answers1