Giter VIP home page Giter VIP logo

Comments (11)

minwe avatar minwe commented on March 29, 2024 14

Hi, all:

I create a mixin to display loading UI like this:

var NProgress = require('nprogress');

var ProgressMixin = {
  componentWillMount: function() {
    NProgress.start();
  },

  componentDidMount: function() {
    NProgress.done();
  }
};

Then add the mixin to every page:

var Page1 = React.createClass({
  mixins: [ProgressMixin],

  render: function() {
    return (
        <div className="Image">
          <h1>Page 1</h1>
        </div>
    );
  }
});

It works! When change the link, the loading UI appear.

But I have to add the mixin to every handler, is there any API for adding mixin to all route handlers?

Thanks very much.

from react-router.

roby-rodriguez avatar roby-rodriguez commented on March 29, 2024 6

or you could use babel es6 decorators if you're working with webpack

create a file decorators/nProgress.jsx:

import NProgress from 'nprogress'

export default function nProgress(target) {
    const superComponentWillMount = target.prototype.componentWillMount
    const superComponentDidMount = target.prototype.componentDidMount
    target.prototype.componentWillMount = function() {
        if (typeof superComponentWillMount === 'function')
            superComponentWillMount.apply(this, arguments)
        NProgress.start()
    }
    target.prototype.componentDidMount = function() {
        if (typeof superComponentDidMount === 'function')
            superComponentDidMount.apply(this, arguments)
        NProgress.done()
    }
}

then simply annotate your components with "nProgress" like so:

import React, { PropTypes, Component } from 'react'
import { Link } from "react-router"
import { Jumbotron } from 'react-bootstrap'
import nProgress from '../decorators/nProgress'

@nProgress
export default class Reports extends Component {
...

from react-router.

garthk avatar garthk commented on March 29, 2024

Hack-around: the components used as a route handler being kinda special, anyway, I'm using them as minimal life support around the domain-specific components. The Route creates the NounPage, which creates the Noun.

NounPage can use its getInitialState to peek at the store it's passing to Noun and, if necessary, use the fire method it's also passing to Noun to ask the store to start loading the content.

My dispatcher is synchronous, so the store's state will show that it's loading the data by the time Page hits its own getInitialState and asks the store for its state.

from react-router.

ryanflorence avatar ryanflorence commented on March 29, 2024

if I understand you correctly, you want a route handler to display some sort of loading UI while you fetch data?

var SomethingHandler = React.createClass({
  getInitialState: function() {
    return { loading: true, something: {} };
  },

  componentDidMount: function() {
    someStore.fetch(this.props.params.id, function(something) {
      this.setState({ loading: false, something: something });
    }.bind(this));
  },

  render: function() {
    if (this.state.loading) {
      return <div>loading ...</div>;
    }
    else {
      return <Something something={this.state.something}/>
    }
  }
});

Am I missing your question?

Edit: s/componentWillMount/componentDidMount/

from react-router.

ryanflorence avatar ryanflorence commented on March 29, 2024

Also, you can pass props into routes and they'll get sent down to your handlers:

<Route handler={App} store={store}/>

// ...
var App = React.createClass({
  componentDidMount: function() {
    this.props.store.whatev();
  }
});

from react-router.

garthk avatar garthk commented on March 29, 2024

componentWillMount makes the most sense. Cheers!

from react-router.

uragecz avatar uragecz commented on March 29, 2024

@minwe Hi, i am trying your solution but desnt work. I am writting in ES6, so its little different.

class Print extends React.Component {

  constructor(props)
  {
    super(props);
    this.state = {
      canvas: null,
      mixins: [ProgressMixin],
    }
    render(){
       return(
         <canvas className="canvas" ref="canvas" width="895" height="560"></canvas>
       )
    }
}

and mixin looks same. -

var NProgress = require('nprogress');

var ProgressMixin = {
    componentWillMount: function() {
        NProgress.start();
    },

    componentDidMount: function() {
        console.log('neco')
        NProgress.done();
    },

    start(){
        console.log('bla');
        NProgress.start();
    },
    stop(){
        NProgress.done();
    }
};

module.exports = ProgressMixin;

But still there is long time to render new page without any loading UI. I am rendering canvas and it takes a lot of time. I tried to get into start method console.log function, but its not invoken. So i think this method isnt called. Any tips ?

from react-router.

minwe avatar minwe commented on March 29, 2024

@uragecz

Mixins not work with ES6 Class, see https://facebook.github.io/react/docs/reusable-components.html#no-mixins .

You should use createClass.

from react-router.

uragecz avatar uragecz commented on March 29, 2024

@minwe createClass needs render method, so have i write just emty div ? If yes, it still doesnt work :/ i changed it to -

var ProgressMixin = React.createClass({
    componentWillMount: function() {
        NProgress.start();
    },

    componentDidMount: function() {
        NProgress.done();
    },

    start: function(){

        NProgress.start();
    },
    stop: function(){
        NProgress.done();
    },

    render: function(){
        return(<div></div>)
    }
});

module.exports = ProgressMixin;

from react-router.

uragecz avatar uragecz commented on March 29, 2024

Or u think to do remake my component which calls mixins: [ProgressMixin] ?

from react-router.

Quadriphobs1 avatar Quadriphobs1 commented on March 29, 2024

@roby-rodriguez Please am sorry to ask this, when you mentioned using annotate I am really confused if I might have to set my project to static type(flow) or typescript as it is not working with normal js. I am using CRA and I dont want to eject is there a way I could modify the append to babelrc without ejecting to configure babel for the annotate

from react-router.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.