├── .babelrc ├── .eslintrc.js ├── .flowconfig ├── .gitignore ├── .npmignore ├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── package-lock.json ├── package.json ├── shimmer.png ├── src ├── index.html ├── index.jsx └── style.js └── webpack.config.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["env", "react", "flow"] 3 | } 4 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | env: { 3 | browser: true, 4 | es6: true, 5 | }, 6 | extends: 'airbnb', 7 | globals: { 8 | Atomics: 'readonly', 9 | SharedArrayBuffer: 'readonly', 10 | }, 11 | parserOptions: { 12 | ecmaFeatures: { 13 | jsx: true, 14 | }, 15 | ecmaVersion: 2018, 16 | sourceType: 'module', 17 | }, 18 | plugins: ['react', 'flowtype'], 19 | rules: { 20 | 'react/sort-comp': [ 21 | 2, 22 | { 23 | order: ['type-annotations', 'static-methods', 'life-cycle', 'everything-else', 'render'], 24 | }, 25 | ], 26 | 'react/no-unused-prop-types': 0, 27 | 'flowtype/boolean-style': [2, 'boolean'], 28 | 'flowtype/define-flow-type': 1, 29 | 'flowtype/generic-spacing': [2, 'never'], 30 | 'flowtype/no-primitive-constructor-types': 2, 31 | 'flowtype/no-weak-types': 2, 32 | 'flowtype/object-type-delimiter': [2, 'comma'], 33 | 'flowtype/require-valid-file-annotation': 2, 34 | 'flowtype/semi': [2, 'always'], 35 | 'flowtype/space-after-type-colon': [2, 'always'], 36 | 'flowtype/space-before-generic-bracket': [2, 'never'], 37 | 'flowtype/space-before-type-colon': [2, 'never'], 38 | 'flowtype/union-intersection-spacing': [2, 'always'], 39 | 'flowtype/use-flow-type': 1, 40 | 'flowtype/valid-syntax': 1, 41 | }, 42 | settings: { 43 | flowtype: { 44 | onlyFilesWithFlowAnnotation: true, 45 | }, 46 | }, 47 | }; 48 | -------------------------------------------------------------------------------- /.flowconfig: -------------------------------------------------------------------------------- 1 | [ignore] 2 | ./node_modules/*/* 3 | 4 | [include] 5 | ./src/* 6 | 7 | [libs] 8 | 9 | [lints] 10 | 11 | [options] 12 | 13 | [strict] 14 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dist 3 | .vscode 4 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | src 2 | .babelrc 3 | .gitignore 4 | README.md 5 | webpack.config.js -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Contributing 2 | 3 | When contributing to this repository, please first discuss the change you wish to make via issue, 4 | email, or any other method with the owners of this repository before making a change. 5 | 6 | Please note we have a code of conduct, please follow it in all your interactions with the project. 7 | 8 | ## Pull Request Process 9 | 10 | 11 | 2. Update the README.md with details of changes to the interface, this includes new environment 12 | variables, exposed ports, useful file locations and container parameters. 13 | 3. You may merge the Pull Request in once you have the sign-off of two other developers, or if you 14 | do not have permission to do that, you may request the second reviewer to merge it for you. 15 | 16 | ## Code of Conduct 17 | 18 | ### Our Pledge 19 | 20 | In the interest of fostering an open and welcoming environment, we as 21 | contributors and maintainers pledge to making participation in our project and 22 | our community a harassment-free experience for everyone, regardless of age, body 23 | size, disability, ethnicity, gender identity and expression, level of experience, 24 | nationality, personal appearance, race, religion, or sexual identity and 25 | orientation. 26 | 27 | ### Our Standards 28 | 29 | Examples of behavior that contributes to creating a positive environment 30 | include: 31 | 32 | * Using welcoming and inclusive language 33 | * Being respectful of differing viewpoints and experiences 34 | * Gracefully accepting constructive criticism 35 | * Focusing on what is best for the community 36 | * Showing empathy towards other community members 37 | 38 | Examples of unacceptable behavior by participants include: 39 | 40 | * The use of sexualized language or imagery and unwelcome sexual attention or 41 | advances 42 | * Trolling, insulting/derogatory comments, and personal or political attacks 43 | * Public or private harassment 44 | * Publishing others' private information, such as a physical or electronic 45 | address, without explicit permission 46 | * Other conduct which could reasonably be considered inappropriate in a 47 | professional setting 48 | 49 | ### Our Responsibilities 50 | 51 | Project maintainers are responsible for clarifying the standards of acceptable 52 | behavior and are expected to take appropriate and fair corrective action in 53 | response to any instances of unacceptable behavior. 54 | 55 | Project maintainers have the right and responsibility to remove, edit, or 56 | reject comments, commits, code, wiki edits, issues, and other contributions 57 | that are not aligned to this Code of Conduct, or to ban temporarily or 58 | permanently any contributor for other behaviors that they deem inappropriate, 59 | threatening, offensive, or harmful. 60 | 61 | ### Scope 62 | 63 | This Code of Conduct applies both within project spaces and in public spaces 64 | when an individual is representing the project or its community. Examples of 65 | representing a project or community include using an official project e-mail 66 | address, posting via an official social media account, or acting as an appointed 67 | representative at an online or offline event. Representation of a project may be 68 | further defined and clarified by project maintainers. 69 | 70 | ### Enforcement 71 | 72 | Instances of abusive, harassing, or otherwise unacceptable behavior may be 73 | reported by contacting the project team at [INSERT EMAIL ADDRESS]. All 74 | complaints will be reviewed and investigated and will result in a response that 75 | is deemed necessary and appropriate to the circumstances. The project team is 76 | obligated to maintain confidentiality with regard to the reporter of an incident. 77 | Further details of specific enforcement policies may be posted separately. 78 | 79 | Project maintainers who do not follow or enforce the Code of Conduct in good 80 | faith may face temporary or permanent repercussions as determined by other 81 | members of the project's leadership. 82 | 83 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | ## Contributing 2 | 3 | :+1::tada: First off, thanks for taking the time to contribute! :tada::+1: 4 | 5 | When contributing to this repository, please first discuss the change you wish to make via issue, email, or any other method with the owners of this repository before making a change. 6 | 7 | Please note we have a code of conduct, please follow it in all your interactions with the project. 8 | 9 | --- 10 | 11 | ## How Can I Contribute? 12 | 13 | - Reporting Bugs 14 | 15 | - Suggesting Enhancements 16 | 17 | - Your First Code Contribution 18 | 19 | --- 20 | 21 | ## Styleguides 22 | 23 | ### Git Commit Messages 24 | 25 | * Use the present tense ("Add feature" not "Added feature") 26 | * Use the imperative mood ("Move cursor to..." not "Moves cursor to...") 27 | * Limit the first line to 72 characters or less 28 | * Reference issues and pull requests liberally after the first line 29 | * When only changing documentation, include `[ci skip]` in the commit title 30 | * Consider starting the commit message with an applicable emoji: 31 | * :art: `:art:` when improving the format/structure of the code 32 | * :memo: `:memo:` when writing docs 33 | * :bug: `:bug:` when fixing a bug 34 | * :fire: `:fire:` when removing code or files 35 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) Ajayjayendran 2019 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # react-shimmer-effect 2 | 3 | > Animation is about creating illustion of life. 4 | 5 | React-Shimmer-Effect, `` component that simulates a [**shimmer**](https://github.com/facebook/Shimmer) effect for the children elements.More customisable is on the way. 6 | 7 |

8 | 9 | NPM 10 | 11 | 12 | JavaScript Style Guide 13 | 14 | 15 | Maintainability 16 | 17 |

18 | 19 | ![Optional Text](/shimmer.png) 20 | 21 | ## Install 22 | 23 | ```bash 24 | npm i react-shimmer-effect 25 | ``` 26 | 27 | ## Usage 28 | 29 | ```jsx 30 | import React, { Component } from "react"; 31 | import Shimmer from "react-shimmer-effect"; 32 | import injectSheet from "react-jss"; 33 | 34 | const StyleSheet = { 35 | container: { 36 | border: "0px solid rgba(255, 255, 255, 1)", 37 | boxShadow: "0px 0px 20px rgba(0, 0, 0, .1)", 38 | borderRadius: "4px", 39 | backgroundColor: "white", 40 | display: "flex", 41 | padding: "16px", 42 | width: "200px" 43 | }, 44 | circle: { 45 | height: "56px", 46 | width: "56px", 47 | borderRadius: "50%" 48 | }, 49 | line: { 50 | width: "96px", 51 | height: "8px", 52 | alignSelf: "center", 53 | marginLeft: "16px", 54 | borderRadius: "8px" 55 | } 56 | }; 57 | class App extends Component { 58 | render() { 59 | const { classes } = this.props; 60 | return ( 61 |
62 | 63 |
64 |
65 | 66 |
67 | ); 68 | } 69 | } 70 | 71 | export default injectSheet(StyleSheet)(App); 72 | ``` 73 | 74 | ### Live Demo 75 | 76 | ![](https://media.giphy.com/media/X81Xq7aYcjWjo7iDZN/giphy.gif) 77 | 78 | ## Contributing 79 | 80 | :+1::tada: First off, thanks for taking the time to contribute! :tada::+1: 81 | 82 | When contributing to this repository, please first discuss the change you wish to make via issue, email, or any other method with the owners of this repository before making a change. 83 | 84 | Please note we have a code of conduct, please follow it in all your interactions with the project. 85 | 86 | --- 87 | 88 | ## How Can I Contribute? 89 | 90 | - Reporting Bugs 91 | 92 | - Suggesting Enhancements 93 | 94 | - Your First Code Contribution 95 | 96 | --- 97 | 98 | ## Styleguides 99 | 100 | ### Git Commit Messages 101 | 102 | - Use the present tense ("Add feature" not "Added feature") 103 | - Use the imperative mood ("Move cursor to..." not "Moves cursor to...") 104 | - Limit the first line to 72 characters or less 105 | - Reference issues and pull requests liberally after the first line 106 | - When only changing documentation, include `[ci skip]` in the commit title 107 | - Consider starting the commit message with an applicable emoji: 108 | - :art: `:art:` when improving the format/structure of the code 109 | - :memo: `:memo:` when writing docs 110 | - :bug: `:bug:` when fixing a bug 111 | - :fire: `:fire:` when removing code or files 112 | 113 | ## License 114 | 115 | MIT © [eTechist](https://github.com/eTechist) 116 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-shimmer-effect", 3 | "version": "1.0.9", 4 | "description": "React Shimmer Effect", 5 | "main": "dist/index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1", 8 | "lint": "eslint src/**/*.js src/**/*.jsx", 9 | "start": "webpack-dev-server --mode development", 10 | "transpile": "babel src -d dist --copy-files", 11 | "prepublishOnly": "npm run transpile", 12 | "build": "webpack --mode production", 13 | "deploy": "gh-pages -d ./dist", 14 | "publish-demo": "npm run build && npm run deploy", 15 | "flow": "flow" 16 | }, 17 | "repository": { 18 | "type": "git", 19 | "url": "git+https://github.com/eTechist/react-shimmer-effect.git" 20 | }, 21 | "keywords": [ 22 | "React", 23 | "Shimmer", 24 | "Animations" 25 | ], 26 | "author": "Ajayjayendran", 27 | "license": "MIT", 28 | "peerDependencies": { 29 | "react": "^16.8.1", 30 | "react-dom": "^16.8.1" 31 | }, 32 | "bugs": { 33 | "url": "https://github.com/eTechist/react-shimmer-effect/issues" 34 | }, 35 | "homepage": "https://github.com/eTechist/react-shimmer-effect#readme", 36 | "devDependencies": { 37 | "babel-cli": "^6.26.0", 38 | "babel-core": "^6.26.3", 39 | "babel-loader": "^7.1.4", 40 | "babel-preset-env": "^1.7.0", 41 | "babel-preset-react": "^6.24.1", 42 | "css-loader": "^2.1.0", 43 | "eslint-plugin-flowtype": "^3.4.2", 44 | "gh-pages": "^2.0.1", 45 | "html-webpack-plugin": "^3.2.0", 46 | "react": "^16.8.1", 47 | "react-dom": "^16.8.1", 48 | "style-loader": "^0.23.1", 49 | "webpack": "^4.29.3", 50 | "webpack-cli": "^3.2.3", 51 | "webpack-dev-server": "^3.1.14" 52 | }, 53 | "dependencies": { 54 | "classnames": "^2.2.6", 55 | "flow-bin": "^0.93.0", 56 | "prop-types": "^15.7.2", 57 | "react-jss": "^8.6.1" 58 | } 59 | } 60 | -------------------------------------------------------------------------------- /shimmer.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ajayjayendran/react-shimmer-effect/e30916560db62bc03ebe8fa9b15ce5d80707b91e/shimmer.png -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | React Shimmer Component 4 | 5 | 9 | 10 | 11 | 14 |
15 | 16 | 17 | -------------------------------------------------------------------------------- /src/index.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component, Fragment } from "react"; 2 | import PropTypes from "prop-types"; 3 | import injectSheet from "react-jss"; 4 | import classNames from "classnames"; 5 | import styles from "./style"; 6 | 7 | class Shimmer extends Component { 8 | /** 9 | * Appending animating shimmer class to the Shimmer component's child. 10 | */ 11 | appendShimmerToChild(child) { 12 | const { classes } = this.props; 13 | return React.cloneElement(child, { 14 | className: classNames(child.props.className, classes.shimmer) 15 | }); 16 | } 17 | 18 | render() { 19 | const { children } = this.props; 20 | let modifiedChildren = []; 21 | if (children.length > 0) { 22 | children.forEach(element => { 23 | modifiedChildren.push(this.appendShimmerToChild(element)); 24 | }); 25 | } else { 26 | modifiedChildren = this.appendShimmerToChild(children); 27 | } 28 | return {modifiedChildren}; 29 | } 30 | } 31 | 32 | Shimmer.propTypes = { 33 | classes: PropTypes.object, 34 | children: PropTypes.object 35 | }; 36 | 37 | export default injectSheet(styles)(Shimmer); 38 | -------------------------------------------------------------------------------- /src/style.js: -------------------------------------------------------------------------------- 1 | const styles = { 2 | shimmer: { 3 | background: '#f2f2f2', 4 | display: 'inline-block', 5 | backgroundImage: 'linear-gradient(to right,#eeeeee 40%,#dddddd 50%,#eeeeee 60%)', 6 | backgroundSize: '800px 104px', 7 | backgroundRepeat: 'no-repeat', 8 | animation: 'shimmerAnim 2s infinite linear', 9 | }, 10 | '@keyframes shimmerAnim': { 11 | '0%': { 12 | backgroundPosition: '-468px 0', 13 | }, 14 | '100%': { 15 | backgroundPosition: '468px 0', 16 | }, 17 | }, 18 | }; 19 | 20 | export default styles; 21 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require("path"); 2 | const HtmlWebpackPlugin = require("html-webpack-plugin"); 3 | 4 | const htmlWebpackPlugin = new HtmlWebpackPlugin({ 5 | template: path.join(__dirname, "/src/index.html"), 6 | filename: "./index.html" 7 | }); 8 | module.exports = { 9 | entry: path.join(__dirname, "./src/index.jsx"), 10 | output: { 11 | path: path.join(__dirname, "./dist/index.js"), 12 | filename: "bundle.js" 13 | }, 14 | module: { 15 | rules: [ 16 | { 17 | test: /\.(js|jsx)$/, 18 | use: "babel-loader", 19 | exclude: /node_modules/ 20 | }, 21 | { 22 | test: /\.css$/, 23 | use: ["style-loader", "css-loader"] 24 | } 25 | ] 26 | }, 27 | plugins: [htmlWebpackPlugin], 28 | resolve: { 29 | extensions: [".js", ".jsx"] 30 | }, 31 | devServer: { 32 | port: 3001 33 | } 34 | }; 35 | --------------------------------------------------------------------------------