├── .editorconfig ├── .gitignore ├── .travis.yml ├── CHANGELOG.md ├── CONTRIBUTING.md ├── README.md ├── example ├── App.tsx ├── index.html └── index.tsx ├── package.json ├── rollup.config.js ├── src ├── Image.test.tsx ├── Image.tsx ├── index.ts ├── useImage.test.ts └── useImage.ts ├── tsconfig.json └── yarn.lock /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | end_of_line = lf 6 | indent_size = 2 7 | indent_style = space 8 | insert_final_newline = true 9 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .vscode 2 | .cache 3 | dist 4 | example/dist 5 | node_modules 6 | tsconfig.tsbuildinfo 7 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - "lts/*" -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Change log 2 | 3 | ## 3.0.1 4 | 5 | - Added `sideEffects` flag for optimal tree-shaking 6 | 7 | ## 3.0.0 8 | 9 | - Extracted the `useImage({src})` hook from the `Image` component 10 | - Exporting using named exports 11 | - renamed `ImageRenderer*` to `Image*` 12 | - switched status to be a string 13 | - switched bundler to vanilla rollup 14 | 15 | ## 2.1.0 16 | 17 | - Added support for `srcset` and `sizes` 18 | 19 | ## 2.0.0 20 | 21 | - Switch from Flowtype to Typescript which changes how the library is bundled and means we're no longer providing typings for Flowtype 22 | - Moved `react` to a `peerDependency` and bumped the minimum version to `^16.8.0` 23 | 24 | ## 1.1.3 25 | 26 | - fix SSR support ([#1](https://github.com/jameslnewell/react-render-image/pull/1)) 27 | 28 | ## 1.1.2 29 | 30 | - improved perf by removing cascading updates 31 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # ❣️ Contributing 2 | 3 | ## Installing 4 | 5 | ``` 6 | yarn 7 | ``` 8 | 9 | ## Developing 10 | 11 | ``` 12 | yarn run start 13 | ``` 14 | 15 | ## Testing 16 | 17 | ``` 18 | yarn run test 19 | ``` 20 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # react-render-image 2 | 3 | [![Build Status](https://travis-ci.org/jameslnewell/react-render-image.svg?branch=master)](https://travis-ci.org/jameslnewell/react-render-image) 4 | 5 | Render an image in React. 6 | 7 | ## Installation 8 | 9 | ```bash 10 | npm install --save react-render-image 11 | // OR 12 | yarn add react-render-image 13 | ``` 14 | 15 | ## Usage 16 | 17 | [Example](https://jameslnewell.github.io/react-render-image/) ([source](https://github.com/jameslnewell/react-render-image/blob/master/example/App.js)) 18 | 19 | ```js 20 | import React from 'react'; 21 | import {Image, useImage} from 'react-render-image'; 22 | 23 | const {image, loaded, errored} = useImage({src}); 24 | 25 | 26 | 27 | 28 | {({image, loaded, errored}) => { 29 | return ; 30 | }} 31 | 32 | ``` 33 | 34 | ## API 35 | 36 | ### <Image/> 37 | 38 | #### Props 39 | 40 | ##### src (required) 41 | 42 | > `string` 43 | 44 | The image URI. 45 | 46 | ##### srcset 47 | 48 | > `string` 49 | 50 | The image URIs to use given various conditions. See the [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/srcset) for further detail. 51 | 52 | ##### sizes 53 | 54 | > `string` 55 | 56 | The width of the image given various conditions. See the [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/sizes) for further detail. 57 | 58 | ##### loading 59 | 60 | > React.Node 61 | 62 | Rendered when the image is `loading`. 63 | 64 | ##### loaded 65 | 66 | > React.Node 67 | 68 | Rendered when the image is `loaded`. 69 | 70 | ##### errored 71 | 72 | > React.Node 73 | 74 | Rendered when the image is `errored`. 75 | 76 | ##### children 77 | 78 | > `({ image?: Image; status: enum, loaded: boolean; errored: boolean; }) => React.Node` 79 | 80 | Called to render something when the image is `loading`, `loaded` or `errored`. 81 | 82 | **Parameters:** 83 | 84 | * `status` - An enum indicating whether the image is loading, loaded or errored. 85 | * `loaded` - A `boolean` indicating whether the image has loaded. 86 | * `errored` - A `boolean` indicating whether the image has errored. 87 | * `image` - The `Image` object. This can be used to inspect the `width` and `height` of the image, or it can be drawn onto a canvas using `ctx.drawImage()`. 88 | 89 | **Returns:** 90 | 91 | > `RectNode` 92 | 93 | ##### onLoad 94 | 95 | > `() => void` 96 | 97 | Called when the image has been loaded. 98 | 99 | ##### onError 100 | 101 | > `() => void` 102 | 103 | Called when the image cannot be loaded. 104 | 105 | ### useImage(options) 106 | 107 | > `useImage({ src?: string; srcset: string[]; sizes: string[]; }) => {status, image?: Image}` 108 | 109 | **Parameters:** 110 | 111 | * `src` - An enum indicating whether the image is loading, loaded or errored. 112 | * `srcset` - The image URIs to use given various conditions. See the [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/srcset) for further detail. 113 | * `sizes` - The image URIs to use given various conditions. See the [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/sizes) for further detail. 114 | 115 | **Returns:** 116 | 117 | > * `status` - An enum indicating whether the image is loading, loaded or errored. 118 | > * `loaded` - A `boolean` indicating whether the image has loaded. 119 | > * `errored` - A `boolean` indicating whether the image has errored 120 | > * `image` - The `Image` object. This can be used to inspect the `width` and `height` of the image, or it can be drawn onto a canvas using `ctx.drawImage()`. 121 | 122 | -------------------------------------------------------------------------------- /example/App.tsx: -------------------------------------------------------------------------------- 1 | /* eslint-disable jsx-a11y/no-autofocus */ 2 | import React from 'react'; 3 | import {Image, ImageProps} from '../src'; 4 | 5 | const defaultURL = 'https://i.pinimg.com/originals/2e/90/0a/2e900a74a9c7e7babe3343fa9dfd6a06.jpg'; 6 | 7 | const App: React.FC = () => { 8 | const srcInput = React.useRef(null); 9 | const srcsetInput = React.useRef(null); 10 | const sizesInput = React.useRef(null); 11 | const [props, setProps] = React.useState>({src: defaultURL}); 12 | 13 | const handleSubmit = (event: React.FormEvent): void => { 14 | event.preventDefault(); 15 | setProps({ 16 | src: srcInput.current?.value || '', 17 | srcset: srcsetInput.current?.value, 18 | sizes: sizesInput.current?.value, 19 | }); 20 | }; 21 | 22 | return ( 23 |
24 |

react-render-image

25 | 26 |
27 |
28 |
29 | 30 | 37 |
38 |
39 | 40 |