@reshoot/react
A React component rendering responsive images, designed to accept the output meta data of @reshoot/loader.
More about reshoot.
Installation
# PNPM
pnpm add @reshoot/react
# NPM
npm install @reshoot/react
# yarn
yarn add @reshoot/reactSetup
The library should work out of the box. The only required setup is to include the styles in your website.
// entry-point.js
import '@reshoot/react/styles.css';However, if you would like to the image to be shown even when JavaScript is disabled (for privacy, accessibility or SEO purposes), you need to render the website on the server side and add the following HTML to the end of <head /> to hide the overlaying placeholder image.
<noscript>
<style>
.js-only {
display: none;
}
</style>
</noscript>API
import imageMeta from '@reshoot/macro';
import Img from '@reshoot/react';
export default function Example() {
return (
<Img
// Meta data of the image. Could be generated and typed automatically using @reshoot/loader and @reshoot/macro
// Type: {
// placeholder?: string;
// srcSet?: string;
// sizes?: string;
// aspectRatio: number;
// color: string;
// src: string;
// }
meta={imageMeta('./image.png')}
// Container wrapping the image
// Type: string | ReactComponent
container="div"
// Reference to the container, work the same as normal ref
// Type: RefCallback<HTMLElement> | MutableRefObject<HTMLElement>
ref={undefined}
// Reference to the inner image element, work the same as normal ref
// Type: RefCallback<HTMLImageElement> | MutableRefObject<HTMLImageElement>
imgRef={undefined}
// The same as the native `alt` property of <img />
// Type: string
alt=""
// The blur radius CSS value of image preview
// Type: string
blur="1rem"
/>
);
}Support
This library has been continuously used in many of my personal projects, and is regarded as production-ready. In the foreseeable future, I will continuously maintain and support this library.
Issues and Feedback
Please voice your opinion and report bugs in the issues sections of this GitHub project.
Contributing
You are more than welcome to add more functionalities, improve documentation, fix bugs, and anything you think is needed. The build step is pretty self-explanatory. Please refer to package.json.
License
MIT