yuanyan / halogen Goto Github PK
View Code? Open in Web Editor NEWA collection of loading spinners with React.js
Home Page: https://yuanyan.github.io/halogen
License: MIT License
A collection of loading spinners with React.js
Home Page: https://yuanyan.github.io/halogen
License: MIT License
The address no longer belongs to this project and I've got a spammy "install this extension" popup. It might be malicious.
I am using webpack and server pre-rendering. Halogen tries to access document
and the server crashes:
/Users/aluxian/Projects/Fou/frontend/node_modules/halogen/node_modules/react-kit/getVendorPropertyName.js:3
var div = document.createElement('div');
^
ReferenceError: document is not defined
at Object.<anonymous> (/Users/aluxian/Projects/Fou/frontend/node_modules/halogen/node_modules/react-kit/getVendorPropertyName.js:3:11)
at Module._compile (module.js:430:26)
at Object.Module._extensions..js (module.js:448:10)
at Module.load (module.js:355:32)
at Function.Module._load (module.js:310:12)
at Module.require (module.js:365:17)
at require (module.js:384:17)
at Object.<anonymous> (/Users/aluxian/Projects/Fou/frontend/node_modules/halogen/node_modules/react-kit/appendVendorPrefix.js:3:29)
at Module._compile (module.js:430:26)
at Object.Module._extensions..js (module.js:448:10)
at Module.load (module.js:355:32)
at Function.Module._load (module.js:310:12)
at Module.require (module.js:365:17)
at require (module.js:384:17)
at Object.<anonymous> (/Users/aluxian/Projects/Fou/frontend/node_modules/halogen/PulseLoader.js:2:14)
at Module._compile (module.js:430:26)
I'd love to use it, but I can't.. is there a quick fix for this or would you have to take a deeper look and change how things work inside the components?
Warning: Loader: 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.
Hi there,
Having some issues testing this component in PhantomJS. Whenever I include it in a component which is included in a test, running in Phantom, I am getting these errors with (I know...) little useful information.
SYNTAX_ERR: DOM Exception 12: An invalid or illegal string was specified.
I've tried all kinds of different ways, but even a file with just import { BeatLoader } from 'halogen';
produces the error.
Running PhantomJS 1.9.19
btw
Any ideas? Chrome doesn't seem to mind at all.
When using inline styles the loaders cannot be styles. They are missing a style
property which they could easily mix into the rendered divs style beside the className
.
Just tried your cool spinner, especially the RingLoader one, but when I tried the "margin" props, it did nothing to it.
When I look into the RingLoader.js, I can't find it used anywhere. Am I missing something ?
Thank you !
For anyone looking to use this package, I created a new module and migrated all the components from this package to the new one. You are welcome to check it out. I fixed a few issues (there are definitely more to fix) and added some new loading spinners. Please let me know if you find any issues.
Hey man,
What would be the possibility of adding an IE8 and IE9 fallback that simply displayed text like "...Loading"?
amazing work!
can i use this in my react-native project?
react peerDependencies make npm shrinkwrap
fail with this error
peer invalid: react@^0.14.8, required by [email protected]
Since React 0.14 brings breaking changes support should be added. When using react 0.14 peer dependency error happens.
Hi, can you please update the npm package with the latest changes?
Nice work. Perhaps since this is solely for react you might want to have the 'react' package as a peerDependency.
Since the release of React 16.0.0, Both PropTypes
and createClass
have been moved into separate packages.
I get the following stack trace when using the PulseLoader:
I have modified PulseLoader.js
with the proposed changes and my file now looks like this:
'use strict';
var React = require('react');
var assign = require('domkit/appendVendorPrefix');
var insertKeyframesRule = require('domkit/insertKeyframesRule');
var PropTypes = require('prop-types');
var createReactClass = require('create-react-class');
/**
* @type {Object}
*/
var keyframes = {
'0%': {
transform: 'scale(1)',
opacity: 1
},
'45%': {
transform: 'scale(0.1)',
opacity: 0.7
},
'80%': {
transform: 'scale(1)',
opacity: 1
}
};
/**
* @type {String}
*/
var animationName = insertKeyframesRule(keyframes);
var Loader = createReactClass({
displayName: 'Loader',
/**
* @type {Object}
*/
propTypes: {
loading: PropTypes.bool,
color: PropTypes.string,
size: PropTypes.string,
margin: PropTypes.string
},
/**
* @return {Object}
*/
getDefaultProps: function getDefaultProps () {
return {
loading: true,
color: '#ffffff',
size: '15px',
margin: '2px'
};
},
/**
* @return {Object}
*/
getBallStyle: function getBallStyle () {
return {
backgroundColor: this.props.color,
width: this.props.size,
height: this.props.size,
margin: this.props.margin,
borderRadius: '100%',
verticalAlign: this.props.verticalAlign
};
},
/**
* @param {Number} i
* @return {Object}
*/
getAnimationStyle: function getAnimationStyle (i) {
var animation = [
animationName,
'0.75s',
i * 0.12 + 's',
'infinite',
'cubic-bezier(.2,.68,.18,1.08)'
].join(' ');
var animationFillMode = 'both';
return {
animation: animation,
animationFillMode: animationFillMode
};
},
/**
* @param {Number} i
* @return {Object}
*/
getStyle: function getStyle (i) {
return assign(this.getBallStyle(i), this.getAnimationStyle(i), {
display: 'inline-block'
});
},
/**
* @param {Boolean} loading
* @return {ReactComponent || null}
*/
renderLoader: function renderLoader (loading) {
if (loading) {
return React.createElement(
'div',
{ id: this.props.id, className: this.props.className },
React.createElement('div', { style: this.getStyle(1) }),
React.createElement('div', { style: this.getStyle(2) }),
React.createElement('div', { style: this.getStyle(3) })
);
}
return null;
},
render: function render () {
return this.renderLoader(this.props.loading);
}
});
module.exports = Loader;
With these changes, the loader does successfully appear on the page.
using webpack and react, installed your plugin (npm install halogen --save)
when i add the following line in my code:
var Loader = require('halogen/PulseLoader');
I get the error.
Can we get an updated 0.2.x version that adds a peer dependency on react v15? Thanks, love this package. ;-)
Hi,
I just found a small CSS typo that crashes halogen on iOS Safari.
See the code below:
/**
* @type {Object}
*/
var keyframesEven = {
'0%': {
transform: 'scale(1.1)'
},
'25': { // <----------------------- Percent sign missing (causes DOM exception)
transform: 'translateY(-' + riseAmount + 'px)'
},
'50%': {
transform: 'scale(0.4)'
},
'75%': {
transform: 'translateY(' + riseAmount + 'px)'
},
'100%': {
transform: 'translateY(0) scale(1.0)'
}
};
/**
* @type {Object}
*/
var keyframesOdd = {
'0%': {
transform: 'scale(0.4)'
},
'25': { // <----------------------- Percent sign missing (causes DOM exception)
transform: 'translateY(' + riseAmount + 'px)'
},
'50%': {
transform: 'scale(1.1)'
},
'75%': {
transform: 'translateY(-' + riseAmount + 'px)'
},
'100%': {
transform: 'translateY(0) scale(0.75)'
}
};
Once I add the percent signs, the error is fixed.
Regards
when use ReactDOM.renderToString render on server side your component throw exception
Is there a prop or CSS styling to follow to make the Loader appear in the center of the page?
Getting below error at >> extraSheet.insertRule(css, index);
SyntaxError: An invalid or illegal string was specified
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/>
);
}
});
Hi, it looks like you have done excellent work here but you don't say which animation is which, which leads to 10 minutes of trying to mark off the names versus the animations. You'll lose users because of this simple thing which is needlessly frustrating and easily fixable.
React version: 16.6.3
prop-types version: 15.6.2
Uncaught TypeError: Cannot read property 'bool' of undefined
at eval (VM66354 PulseLoader.js:37)
at Object../node_modules/halogen/PulseLoader.js (VM65913 bundle.js:3810)
at __webpack_require__ (VM65913 bundle.js:725)
at fn (VM65913 bundle.js:102)
at eval (VM66353 Loading.js:10)
at Module../src/components/Loading/Loading.js (VM65913 bundle.js:5746)
at __webpack_require__ (VM65913 bundle.js:725)
at fn (VM65913 bundle.js:102)
at eval (VM66348 Handler.js:11)
at Module../src/containers/Extractors/Handler/Handler.js (VM65913 bundle.js:5919)
In order to the be fully compatible to other users the published package must be a builded file without JSX markup.
The only change required to do this is update the package.json file
// package.json
//.......
"main": "dist/halogen.js",
//.......
When run gulp dev
/Users/old_david/Desktop/halogen/node_modules/require-dir/index.js:93
if (!require.extensions.hasOwnProperty(ext)) {
^
TypeError: require.extensions.hasOwnProperty is not a function
at requireDir (/Users/old_david/Desktop/halogen/node_modules/require-dir/index.js:93:37)
at Object.<anonymous> (/Users/old_david/Desktop/halogen/node_modules/gulp-git/index.js:2:18)
at Module._compile (module.js:652:30)
at Object.Module._extensions..js (module.js:663:10)
at Module.load (module.js:565:32)
at tryModuleLoad (module.js:505:12)
at Function.Module._load (module.js:497:3)
at Module.require (module.js:596:17)
at require (internal/module.js:11:18)
at Object.<anonymous> (/Users/old_david/Desktop/halogen/gulpfile.js:10:9)
I am not sure it's ok to distribute jsx files, webpack can't recongize it by default and I suppose we should not have to BabelScriptize node.js code. It would quickly escalate into super long and brittle builds.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.