Fallback text or component for unsupported browsers
Opened this issue · 3 comments
bjrmatos commented
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 commented
Good idea, i will have a try.
chiedo commented
Any progress on the fallback? You can use bowser (https://www.npmjs.com/package/bowser) to do so
diffractometer commented
+1