Fallback text or component for unsupported browsers

[bjrmatos]

i think it would be good to provide some way to specify what to show when animations are not supported, maybe as a new prop or some child passed to the component

prop:

var Loader = require('halogen/PulseLoader');
var Example = React.createClass({
    render: function() {
        var fallbackContent = 'Loading...' // or <span><b>Loading...</b></span>

        return (
            <Loader color="#26A65B" size="16px" margin="4px" fallbackContent={fallbackContent} />
        );
    }
});

or

var Loader = require('halogen/PulseLoader');
var Example = React.createClass({
    render: function() {
        return (
            <Loader color="#26A65B" size="16px" margin="4px">
              <span><b>Loading...</b></span> // or 'Loading...'
            <Loader/>
        );
    }
});

the mechanism to determine whether this fallback content should be shown could be specified as a new prop.

var fallback = !Modernizr.cssanimations;

var Loader = require('halogen/PulseLoader');
var Example = React.createClass({
    render: function() {
        return (
            <Loader color="#26A65B" size="16px" margin="4px" fallback={fallback} >
              <span><b>Loading...</b></span> // or 'Loading...'
            <Loader/>
        );
    }
});

[yuanyan]

Good idea, i will have a try.

[chiedo]

Any progress on the fallback? You can use bowser (https://www.npmjs.com/package/bowser) to do so

[diffractometer]

+1