Package Exports

react-shimmer-effect

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-shimmer-effect) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-shimmer-effect

Animation is about creating illustion of life.

React-Shimmer-Effect, <Shimmer> component that simulates a shimmer effect for the children elements.More customisable is on the way.

Optional Text

Install

npm i react-shimmer-effect

Usage

import React, { Component } from "react";
import Shimmer from "react-shimmer-effect";
import injectSheet from "react-jss";

const StyleSheet = {
  container: {
    border: "0px solid rgba(255, 255, 255, 1)",
    boxShadow: "0px 0px 20px rgba(0, 0, 0, .1)",
    borderRadius: "4px",
    backgroundColor: "white",
    display: "flex",
    padding: "16px",
    width: "200px"
  },
  circle: {
    height: "56px",
    width: "56px",
    borderRadius: "50%"
  },
  line: {
    width: "96px",
    height: "8px",
    alignSelf: "center",
    marginLeft: "16px",
    borderRadius: "8px"
  }
};
class App extends Component {
  render() {
    const { classes } = this.props;
    return (
      <div className={classes.container}>
        <Shimmer>
          <div className={classes.circle} />
          <div className={classes.line} />
        </Shimmer>
      </div>
    );
  }
}

export default injectSheet(StyleSheet)(App);

Live Demo

Contributing

Feel free to send PRs.