├── README.md ├── demo └── src │ ├── image.jpg │ └── index.js ├── nwb.config.js ├── package.json ├── src └── index.js ├── tests ├── .eslintrc └── index-test.js └── yarn.lock /README.md: -------------------------------------------------------------------------------- 1 | # react-srcset-image 2 | 3 | [![npm package][npm-badge]][npm] 4 | 5 | React component to optimize your images based on `srcset` and add an automatic medium-like blur animation. 6 | 7 | - Creates srcset images with webpack and [responsive-loader](http://github.com/revolunet/responsive-loader). 8 | - Embed base64 blurred placeholder (default: 100x100) 9 | - Animate between placeholder and final image 10 | 11 | Demo : [http://revolunet.github.io/react-srcset-image](http://revolunet.github.io/react-srcset-image) 12 | 13 | :warning: This component needs webpack to produce multiple images sizes for you. 14 | 15 | :warning: Target images needs to be statically defined. 16 | 17 | # Usage 18 | 19 | ```jsx 20 | import Image from 'react-srcset-image' 21 | 22 | // webpack responsive-loader config 23 | const imageSrc = require('responsive-loader?placeholder=true&sizes[]=500,sizes[]=1000!./image.jpg'); 24 | 25 | const Demo = () => 26 | ``` 27 | 28 | 29 | [npm-badge]: https://img.shields.io/npm/v/react-srcset-image.png?style=flat-square 30 | [npm]: https://www.npmjs.org/package/react-srcset-image 31 | -------------------------------------------------------------------------------- /demo/src/image.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/revolunet/react-srcset-image/52f9652047ac2b7f8eb0ed3cca685b13b8ad8440/demo/src/image.jpg -------------------------------------------------------------------------------- /demo/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import {render} from 'react-dom' 3 | import GithubCorner from 'react-github-corner' 4 | 5 | import Image from '../../src' 6 | 7 | // responsive-loader config 8 | const image = require('responsive-loader?placeholder=true&sizes[]=400&sizes[]=600&sizes[]=1000&sizes[]=1400!./image.jpg'); 9 | 10 | class Demo extends React.Component { 11 | render() { 12 | return ( 13 |
14 |

react-srcset-image Demo

15 | 16 |
17 | 18 |
19 |
20 | ) 21 | } 22 | } 23 | 24 | render(, document.querySelector('#demo')) 25 | -------------------------------------------------------------------------------- /nwb.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | type: 'react-component', 3 | npm: { 4 | esModules: true, 5 | umd: { 6 | global: 'ReactSrcsetImage', 7 | externals: { 8 | react: 'React' 9 | } 10 | } 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-srcset-image", 3 | "version": "1.1.1", 4 | "description": "react-srcset-image React component : create srcset images + blur loading", 5 | "author": "Julien Bouquillon ", 6 | "license": "MIT", 7 | "main": "lib/index.js", 8 | "module": "es/index.js", 9 | "files": [ 10 | "css", 11 | "es", 12 | "lib", 13 | "umd" 14 | ], 15 | "scripts": { 16 | "build": "nwb build-react-component", 17 | "clean": "nwb clean-module && nwb clean-demo", 18 | "start": "nwb serve-react-demo", 19 | "test": "nwb test-react", 20 | "test:coverage": "nwb test-react --coverage", 21 | "test:watch": "nwb test-react --server", 22 | "deploy": "gh-pages -d demo/dist", 23 | "postpublish": "npm run deploy" 24 | }, 25 | "dependencies": {}, 26 | "peerDependencies": { 27 | "react": "15.x" 28 | }, 29 | "devDependencies": { 30 | "gh-pages": "^1.0.0", 31 | "jimp": "^0.2.28", 32 | "nwb": "0.15.x", 33 | "react": "^15.5.4", 34 | "react-dom": "^15.5.4", 35 | "react-github-corner": "^0.3.0", 36 | "responsive-loader": "github:revolunet/responsive-loader#acae10d66ee34b1dde08edf914deb0c605d90705" 37 | }, 38 | "repository": { 39 | "type": "git", 40 | "url": "https://github.com/revolunet/react-srcset-image.git" 41 | }, 42 | "homepage": "https://revolunet.github.io/react-srcset-image/", 43 | "bugs": { 44 | "url": "https://github.com/revolunet/react-srcset-image/issues" 45 | }, 46 | "keywords": [ 47 | "react-component", 48 | "image", 49 | "srcset", 50 | "mobile", 51 | "webpack" 52 | ] 53 | } 54 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | class Image extends React.Component { 4 | constructor(props, ...args) { 5 | super(props, ...args); 6 | this.state = { 7 | src: null 8 | }; 9 | } 10 | 11 | componentDidMount() { 12 | const el = this.img; 13 | if (el.complete) { 14 | const src = el.src; 15 | this.setState(() => ({ 16 | src 17 | })); 18 | } 19 | } 20 | 21 | onImageLoaded = img => { 22 | const src = img.target.src; 23 | this.setState(() => ({ 24 | src 25 | })); 26 | }; 27 | render() { 28 | const { responsiveImage, title, alt } = this.props; 29 | const imgStyle = { 30 | display:'block', 31 | opacity: this.state.src ? 1 : 0.01, 32 | transition: "all 0.3s ease-in", 33 | width: '100%', 34 | height: 'auto', 35 | }; 36 | return ( 37 |
48 | { 50 | this.img = img; 51 | }} 52 | style={imgStyle} 53 | onLoad={this.onImageLoaded} 54 | src={responsiveImage.src} 55 | srcSet={responsiveImage.srcSet} 56 | title={title} 57 | alt={alt} 58 | /> 59 |
60 | ); 61 | } 62 | } 63 | 64 | export default Image; 65 | -------------------------------------------------------------------------------- /tests/.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "mocha": true 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /tests/index-test.js: -------------------------------------------------------------------------------- 1 | import expect from 'expect' 2 | import React from 'react' 3 | import {render, unmountComponentAtNode} from 'react-dom' 4 | 5 | import Component from 'src/' 6 | 7 | describe('Component', () => { 8 | let node 9 | 10 | beforeEach(() => { 11 | node = document.createElement('div') 12 | }) 13 | 14 | afterEach(() => { 15 | unmountComponentAtNode(node) 16 | }) 17 | 18 | it('displays a welcome message', () => { 19 | render(, node, () => { 20 | expect(node.innerHTML).toContain('Welcome to React components') 21 | }) 22 | }) 23 | }) 24 | --------------------------------------------------------------------------------