](https://frameright.io)
2 | [](https://www.npmjs.com/package/@frameright/react-image-display-control)
3 | [](https://github.com/Frameright/react-image-display-control/actions/workflows/main.yml)
4 |
5 |
6 |
7 |
17 |
18 | # Image Display Control React Component
19 |
20 | > **➡️ See this document rendered at [docs.frameright.io/react](https://docs.frameright.io/react)**
21 |
22 | An easy way to do [Image Display Control](https://frameright.io) in your React
23 | web app. Made with :heart: by [Frameright](https://frameright.io). Power
24 | to the pictures!
25 |
26 | > **Less than 5kB in your final client-side bundle.**
27 |
28 | :sparkles: [Live demo](https://react.frameright.io)
29 |
30 | 💻 [CodeSandbox](https://codesandbox.io/s/image-display-control-react-component-m6qj9r)
31 |
32 | ## Table of Contents
33 |
34 |
35 |
36 | - [Overview](#overview)
37 | * [Without this component](#without-this-component)
38 | * [Basic usage](#basic-usage)
39 | - [Image Display Control metadata](#image-display-control-metadata)
40 | - [Installation](#installation)
41 | - [Usage](#usage)
42 |
43 |
44 |
45 | ## Overview
46 |
47 | This React component extends any `
80 |
81 | ```html
82 | 
88 | ```
89 |
90 | This is less than optimal, as there might be, in the example above, a better
91 | square-ish region in the image that could be displayed instead of the
92 | middle-crop.
93 |
94 | ### Basic usage
95 |
96 | This React component extends its `
101 |
102 | ```html
103 |
109 |
169 | |
12 |
22 |
43 | 
32 | 
41 | |
44 |
| Resize me ▲ | 47 |
<-- DOM parent of all the ![]()
s
364 | // <-- doesn't produce a DOM element
365 | // ![]()
366 | // ![]()
367 | //
368 | // <-- doesn't produce a DOM element
369 | // ![]()
<-- DOM sibling of the previous ![]()
s
370 | //
371 | //
372 | const uuid = child.dataset.idcUuid;
373 | if (uuid) {
374 | const parent = child.parentElement;
375 | if (parent) {
376 | return Array.from(
377 | parent.querySelectorAll('[data-idc-uuid="' + uuid + '"]')
378 | );
379 | }
380 | }
381 | }
382 | return [];
383 | }
384 |
385 | // To be used only on server-side.
386 | function _readImageRegionsJsonFromDisk(
387 | pathOnServer: string,
388 | debug: boolean
389 | ): string {
390 | if (!fs) {
391 | _warn("fs module not available, can't read image regions from disk.");
392 | return '';
393 | }
394 |
395 | let result = '';
396 | try {
397 | _traceIfDebug(debug, 'Reading image regions from', pathOnServer);
398 | const buffer = fs.readFileSync(pathOnServer);
399 | result = _readImageRegionsJsonFromBuffer(buffer);
400 | _traceIfDebug(debug, 'Found image regions:', result);
401 | } catch (error) {
402 | _warn('Error while reading image regions from disk:', error);
403 | }
404 | return result;
405 | }
406 |
407 | function _readImageRegionsJsonFromBuffer(buffer: Buffer | ArrayBuffer): string {
408 | const parser = new Parser(buffer);
409 | const regions = parser.getIdcMetadata('rectangle', 'crop');
410 | return JSON.stringify(regions);
411 | }
412 |
413 | function _getImageSource(
414 | element: React.ReactElement | HTMLImageElement
415 | ): ImageSource | null {
416 | if (!_isImgElement(element)) {
417 | return null;
418 | }
419 |
420 | let result: ImageSource | null = null;
421 | if ('props' in element) {
422 | // React element
423 |
424 | const elementProps = {
425 | src: {},
426 | 'data-path-on-server': null,
427 | ...(element.props as object),
428 | };
429 |
430 | if (typeof elementProps.src === 'string') {
431 | result = {
432 | src: elementProps.src,
433 | };
434 | } else if ('src' in elementProps.src) {
435 | // This typically happen when statically importing an image on Next.js,
436 | // the resulting object being an instance of StaticImageData.
437 | result = {
438 | src: elementProps.src.src as string,
439 | };
440 |
441 | if ('pathOnServer' in elementProps.src) {
442 | result.pathOnServer = elementProps.src.pathOnServer as string;
443 | }
444 | } else {
445 | _warn('Unknown src= attribute format: ', elementProps.src);
446 | return null;
447 | }
448 |
449 | if (elementProps['data-path-on-server']) {
450 | result.pathOnServer = elementProps['data-path-on-server'];
451 | }
452 | } else {
453 | // HTML element
454 |
455 | result = {
456 | src:
457 | element.attributes.getNamedItem('data-src-prop')?.value ||
458 | element.attributes.getNamedItem('src')?.value ||
459 | element.src,
460 | };
461 | }
462 |
463 | return result;
464 | }
465 |
466 | // Returns true if the element is an