React 15.5.0 deprecation error
Opened this issue ยท 9 comments
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.
I have the same problem. I think this repo is not maintained anymore.
I think this https://github.com/kirillDanshin/halogenium is maintained. Even I'll give it a try
The issue is described here:
https://facebook.github.io/react/blog/2017/04/07/react-v15.5.0.html#migrating-from-react.createclass
Replace with a class or use the drop in replacement.
@chatch Aware of it. But even if you fix it and try to raise a PR, it doesn't look like it is going to get merged.
There are lots of examples of similar loaders in the Internet. So, I just created my own 30-lines react component for that purpose :)
@alexbra Would love to take a look :)
@Vishal0203
sure. I use Radium and Typescript
import * as Radium from 'radium';
export const Loader = Radium((props: { color: string, size: string, margin: string }) => {
return (
<div>
<div style={styles.dotStyle(props.color, props.size, props.margin, 1)} />
<div style={styles.dotStyle(props.color, props.size, props.margin, 2)} />
<div style={styles.dotStyle(props.color, props.size, props.margin, 3)} />
</div>
);
})
const pulseKeyframes = Radium.keyframes({
'0%': {
transform: 'scale(1)',
opacity: 1
},
'45%': {
transform: 'scale(0.1)',
opacity: 0.7
},
'80%': {
transform: 'scale(1)',
opacity: 1
}
}, 'pulse');
const styles = {
dotStyle: (color: string, size: string, margin: string, i: number) => {
return {
backgroundColor: color,
width: size,
height: size,
margin: margin,
borderRadius: '100%',
animation: `0.75s ${i * 0.12}s infinite cubic-bezier(.2,.68,.18,1.08)`,
animationName: pulseKeyframes,
animationFillMode: 'both',
display: 'inline-block'
}
}
};
@alexbra Looks good! I didn't know about radium. I think its better to create our own as you said. Thanks for share.
Yep! I similarly used styled-components (and prop-types for now) to roll my own.
import React from "react";
import PropTypes from "prop-types";
import styled, { keyframes } from "styled-components";
const pulse = keyframes`
0% {
transform: scale(1);
opacity: 1;
}
45% {
transform: scale(0.1);
opacity: 0.7;
}
80% {
transform: scale(1);
opacity: 1;
}
`;
const Ball = styled.div`
display: inline-block;
border: 0px solid transparent;
background: ${props => props.color};
width: ${props => props.size};
height: ${props => props.size};
margin: ${props => props.margin};
border-radius: 100%;
animation: 0.75s cubic-bezier(.2,.68,.18,1.08) ${props => props.iteration * 0.12 + "s"} infinite both ${pulse};
`;
Ball.propTypes = {
color: PropTypes.string,
size: PropTypes.string,
margin: PropTypes.string,
iteration: PropTypes.number
};
const PulseLoader = ({
color = "#fff",
size = "15px",
margin = "2px",
...otherProps
}) => {
const ballProps = { color, size, margin };
return (
<div {...otherProps}>
<Ball iteration={1} {...ballProps} />
<Ball iteration={2} {...ballProps} />
<Ball iteration={3} {...ballProps} />
</div>
);
};
export default PulseLoader;
Sad to see repo no longer being maintained, even if others are will to be contributors.
Anyway, https://github.com/kirillDanshin/halogenium seems to be the next best option.