xeodou / react-crouton Goto Github PK

View Code? Open in Web Editor NEW

145.0 145.0 15.0 456 KB

A message component for reactjs

Home Page: https://xeodou.github.io/react-crouton/

License: MIT License

JavaScript 80.12% HTML 6.82% CSS 13.06%

react-crouton's People

Contributors

Stargazers

Watchers

Forkers

winkler1 eiriklv sskyy thjelm jrunning charityware ssejava larktravel kidjp85 lumiscript larsmaultsby sndineshan jdiss gismo-stack

react-crouton's Issues

setState(...): Can only update a mounted or mounting component.

I'm getting this warning when onDismiss is fired. Any ideas what I could do to fix this?

Warning: setState(...): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op. Please check the code for the react-crouton component.

Parent:

<Alert alert={this.props.alert} clearAlert={this.props.clearAlert} />

Alert Component:

import React, {Component} from 'react'
import Crouton from 'react-crouton'

export default class Alert extends Component {

  handleDismiss(){
    this.props.clearAlert();
  }

  renderAlert(){
    if(this.props.alert.type !== null){
      return(
        <Crouton
        id = {Date.now()}
        message={this.props.alert.message}
        onDismiss={this.handleDismiss.bind(this)}
        type={this.props.alert.type}/>
      );
    }
  }

  render(){
    return(
      <div>
      {this.renderAlert()}
      </div>
    );
  }
}
```

Style not showing up

While, trying to use it I am unable to get styles shown. All text comes with white background. What could be the reason or any direction where I can look at possible issue?
I have intergrated the provided styles.css using following line in html code.

Cannot resolve module 'react/lib/emptyFunction'

Hi,
Using [email protected], I'm getting this when trying to test out a Crouton.

[0] Module not found: Error: Cannot resolve module 'react/lib/emptyFunction' in /Users/gustavojimenez/Projects/myProject/node_modules/react-crouton
[0] resolve module react/lib/emptyFunction in /Users/gustavojimenez/Projects/myProject/node_modules/react-crouton
[0]   looking for modules in /Users/gustavojimenez/Projects/myProject/src
[0]     /Users/gustavojimenez/Projects/myProject/src/react doesn't exist (module as directory)
[0]   looking for modules in /Users/gustavojimenez/node_modules
[0]     /Users/gustavojimenez/node_modules/react doesn't exist (module as directory)
[0]   looking for modules in /Users/gustavojimenez/Projects/myProject/node_modules
[0]     resolve 'file' or 'directory' lib/emptyFunction in /Users/gustavojimenez/Projects/myProject/node_modules/react
[0]       resolve file
[0]         /Users/gustavojimenez/Projects/myProject/node_modules/react/lib/emptyFunction doesn't exist
[0]         /Users/gustavojimenez/Projects/myProject/node_modules/react/lib/emptyFunction.json doesn't exist
[0]         /Users/gustavojimenez/Projects/myProject/node_modules/react/lib/emptyFunction.js doesn't exist
[0]       resolve directory
[0]         /Users/gustavojimenez/Projects/myProject/node_modules/react/lib/emptyFunction doesn't exist (directory default file)
[0]         /Users/gustavojimenez/Projects/myProject/node_modules/react/lib/emptyFunction/package.json doesn't exist (directory description file)
[0] [/Users/gustavojimenez/Projects/myProject/src/react]
[0] [/Users/gustavojimenez/node_modules/react]
[0] [/Users/gustavojimenez/Projects/myProject/node_modules/react/lib/emptyFunction]
[0] [/Users/gustavojimenez/Projects/myProject/node_modules/react/lib/emptyFunction.json]
[0] [/Users/gustavojimenez/Projects/myProject/node_modules/react/lib/emptyFunction.js]
[0]  @ ./~/react-crouton/index.js 2:20-54
[0] webpack built edf326036966f1f37af1 in 7951ms

If this is because of using [email protected], by any chance will you be supporting it in the future?

prop autoMiss not working

Hy, to prop autoMiss when it has the value true and also some button in the component does not work, is this behavior any better?
I will do it in my repository and make a new pull request, if it is valid.
thank you again

Update react version?

I'm trying to use your component altogether with react-bootstrap, but while installing dependencies I'm seeing this:

39251 error peerinvalid The package react does not satisfy its siblings' peerDependencies requirements!
39251 error peerinvalid Peer [email protected] wants react@>=0.13
39251 error peerinvalid Peer [email protected] wants [email protected]

Is it possible to upgrade react version in your dependencies?

[React v15] Accessing PropTypes via the main React package is deprecated

After upgrading to react 15.5.4 I'm getting these warnings in the browser console:

Warning: Accessing PropTypes via the main React package is deprecated. Use the prop-types package from npm instead.
warning.js:36 Warning: react-crouton: React.createClass is deprecated and will be removed in version 16. Use plain JavaScript classes instead. If you're not yet ready to migrate, create-react-class is available on npm as a drop-in replacement.

Send message as HTML string or as component

Make it possible to send the prop message as an HTML string or as a component, for example:

message={<div>my <strong>message</strong></div>}

// or

message={"<div>my <strong>message</strong></div>"}

CSS class names for buttons

Are there plans to send the CSS class names for the buttons along with the name and listener?
It would come in handy for styling especially with Bootstrap.

onDismiss called immediately

The tests are failing for me but this is the test:

Create a new Crouton and check that the onDismiss function is not called before the timeout has expired.

it('should not call onDismiss directly', function() {
    var dismissCalled = 0;
    var crouton = TestUtils.renderIntoDocument(
      Crouton({
        id: 123456,
        message: 'data.message',
        type: 'errorClassName',
        hidden: false,
        onDismiss: function() {
          dismissCalled++;
        }
      }))

      expect(dismissCalled, 0)
  })

At the moment this test would fail because index.js::changeState is called from componentWillMount where this line is executed:

this.dismiss();

Solutions?

Uncomment the line? The dismiss should be called (eventually) due the setTimeout
Do not call changeState from componentWillMount but instead use getInitialState and getDefaultProps for the 'startup' logic

xeodou / react-crouton Goto Github PK

react-crouton's People

Contributors

Stargazers

Watchers

Forkers

react-crouton's Issues

setState(...): Can only update a mounted or mounting component.

Style not showing up

Cannot resolve module 'react/lib/emptyFunction'

prop autoMiss not working

Update react version?

[React v15] Accessing PropTypes via the main React package is deprecated

Send message as HTML string or as component

CSS class names for buttons

onDismiss called immediately

Add support to render children

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent