React 15.5.0 deprecation error

[alexbra]

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.

[Vishal0203]

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

[chatch]

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.

[Vishal0203]

@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.

[alexbra]

There are lots of examples of similar loaders in the Internet. So, I just created my own 30-lines react component for that purpose :)

[Vishal0203]

@alexbra Would love to take a look :)

[alexbra]

@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'
        }
    }
};

[Vishal0203]

@alexbra Looks good! I didn't know about radium. I think its better to create our own as you said. Thanks for share.

[epogue]

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;

[pisaacs]

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.