https://docs-frameright-io.netlify.app/assets/js/3771367e.0a234da1.js

1"use strict";(self.webpackChunkframeright_docs=self.webpackChunkframeright_docs||[]).push([[9917],{3905:(e,t,n)=>{n.d(t,{Zo:()=>m,kt:()=>u});var a=n(7294);function r(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function i(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,a)}return n}function o(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?i(Object(n),!0).forEach((function(t){r(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):i(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function l(e,t){if(null==e)return{};var n,a,r=function(e,t){if(null==e)return{};var n,a,r={},i=Object.keys(e);for(a=0;a<i.length;a++)n=i[a],t.indexOf(n)>=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(a=0;a<i.length;a++)n=i[a],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}var s=a.createContext({}),p=function(e){var t=a.useContext(s),n=t;return e&&(n="function"==typeof e?e(t):o(o({},t),e)),n},m=function(e){var t=p(e.components);return a.createElement(s.Provider,{value:t},e.children)},c="mdxType",d={inlineCode:"code",wrapper:function(e){var t=e.children;return a.createElement(a.Fragment,{},t)}},h=a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,i=e.originalType,s=e.parentName,m=l(e,["components","mdxType","originalType","parentName"]),c=p(n),h=r,u=c["".concat(s,".").concat(h)]||c[h]||d[h]||i;return n?a.createElement(u,o(o({ref:t},m),{},{components:n})):a.createElement(u,o({ref:t},m))}));function u(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var i=n.length,o=new Array(i);o[0]=h;var l={};for(var s in t)hasOwnProperty.call(t,s)&&(l[s]=t[s]);l.originalType=e,l[c]="string"==typeof e?e:r,o[1]=l;for(var p=2;p<i;p++)o[p]=n[p];return a.createElement.apply(null,o)}return a.createElement.apply(null,n)}h.displayName="MDXCreateElement"},2235:(e,t,n)=>{n.d(t,{P:()=>i});var a=n(7294),r=n(9960);function i(e){let{href:t}=e;return a.createElement(r.Z,{className:"github-corner-icon",href:t},a.createElement("img",{src:"/img/thirdparty/github-mark.svg",alt:"GitHub repository"}))}},3832:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>m,contentTitle:()=>s,default:()=>u,frontMatter:()=>l,metadata:()=>p,toc:()=>c});var a=n(7462),r=(n(7294),n(3905)),i=n(9471),o=n(2235);const l={sidebar_position:20,tags:["explanation"],pagination_prev:null},s="React Component",p={unversionedId:"react/README",id:"react/README",title:"React Component",description:"\x3c!--",source:"@site/docs/react/README.md",sourceDirName:"react",slug:"/react/",permalink:"/react/",draft:!1,editUrl:"https://github.com/frameright/docs.frameright.io/tree/main/docs/react/README.md",tags:[{label:"explanation",permalink:"/tags/explanation"}],version:"current",sidebarPosition:20,frontMatter:{sidebar_position:20,tags:["explanation"],pagination_prev:null},sidebar:"documentationSidebar",next:{title:"Usage",permalink:"/react/usage"}},m={},c=[{value:"Overview",id:"overview",level:2},{value:"Without this component",id:"without-this-component",level:3},{value:"Basic usage",id:"basic-usage",level:3},{value:"Image Display Control metadata",id:"image-display-control-metadata",level:2},{value:"Installation",id:"installation",level:2},{value:"Usage",id:"usage",level:2}],d={toc:c},h="wrapper";

1function u(e){let{components:t,...n}=e;return(0,r.kt)(h,(0,a.Z)({},d,n,{components:t,mdxType:"MDXLayout"}),(0,r.kt)("h1",{id:"react-component"},"React Component"),(0,r.kt)(o.P,{href:"https://github.com/Frameright/react-image-display-control",mdxType:"GitHubCornerIcon"}),(0,r.kt)("p",null,"An easy way to do ",(0,r.kt)("a",{parentName:"p",href:"https://frameright.io"},"Image Display Control")," in your React\nweb app."),(0,r.kt)("p",null,"\u2003"," \u2728 ",(0,r.kt)("a",{parentName:"p",href:"https://react.frameright.io"},"Live demo",(0,r.kt)(i.Z,{mdxType:"IconExternalLink"}))),(0,r.kt)("h2",{id:"overview"},"Overview"),(0,r.kt)("p",null,"This React component extends any ",(0,r.kt)("inlineCode",{parentName:"p"},"<img>"),"-like element/component with the ability\nto retrieve Image Display Control metadata from its image file in order to\nautomatically and responsively zoom in on the most interesting part of the\nimage."),(0,r.kt)("p",null,"It integrates nicely with other advanced features you may be using in your\nexisting project, e.g.:"),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("a",{parentName:"li",href:"https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/srcset"},"image candidates (srcset)"),",\nwhether you define them yourself or whether they are generated on your behalf\nby another component like\n",(0,r.kt)("a",{parentName:"li",href:"https://nextjs.org/docs/api-reference/next/image"},"Next.js ",(0,r.kt)("inlineCode",{parentName:"a"},"<Image>")),","),(0,r.kt)("li",{parentName:"ul"},(0,r.kt)("a",{parentName:"li",href:"/react/ssr"},"server-side rendering")," and static site generation, e.g. in a Next.js or\nin a Vite-based project.")),(0,r.kt)("p",null,"It doesn't change the structure of your DOM: your existing CSS rules still\napply."),(0,r.kt)("admonition",{type:"info"},(0,r.kt)("p",{parentName:"admonition"},"If you are not using React, you may want to have a look at the\n",(0,r.kt)("a",{parentName:"p",href:"/web-component/"},"Image Display Control Web component"),"\ninstead.")),(0,r.kt)("h3",{id:"without-this-component"},"Without this component"),(0,r.kt)("p",null,"When an image is too big for its ",(0,r.kt)("inlineCode",{parentName:"p"},"<img>")," HTML element, the best option browsers\noffer nowadays is to use the\n",(0,r.kt)("a",{parentName:"p",href:"https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit"},(0,r.kt)("inlineCode",{parentName:"a"},"object-fit: cover;")),"\nCSS property in order to scale and middle-crop it:"),(0,r.kt)("div",{className:"code-with-illustration"},(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-html"},'<img\n  src="https://react.frameright.io/assets/pics/skater.jpg"\n\n  width="200"\n  height="200"\n  style="object-fit: cover;"\n/>\n')),(0,r.kt)("img",{src:"/img/ekroos/skater_middlecrop.png"})),(0,r.kt)("p",null,"This is less than optimal, as there might be, in the example above, a better\nsquare-ish region in the image that could be displayed instead of the\nmiddle-crop."),(0,r.kt)("h3",{id:"basic-usage"},"Basic usage"),(0,r.kt)("p",null,"This React component extends its ",(0,r.kt)("inlineCode",{parentName:"p"},"<img>"),"-like children with the ability to\nretrieve image regions from their image metadata, and to zoom in on the best one\nfor the current element size:"),(0,r.kt)("div",{className:"code-with-illustration"},(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-html"},'<ImageDisplayControl>\n  <img\n    src="https://react.frameright.io/assets/pics/skater.jpg"\n\n    width="200"\n    height="200"\n  />\n</ImageDisplayControl>\n')),(0,r.kt)("img",{src:"/img/ekroos/skater_withidc.png"})),(0,r.kt)("p",null,"The resulting HTML element is responsive and will automatically reassess the\nbest region to zoom in on when it gets resized, e.g. when the user turns their\nphone from portrait to landscape."),(0,r.kt)("div",{className:"youtube-embed"},(0,r.kt)("iframe",{className:"youtube-embed",src:"https://www.youtube.com/embed/UsBtRSyY-7c",title:"YouTube video player",frameBorder:"0",allow:"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share",allowFullScreen:!0})),(0,r.kt)("h2",{id:"image-display-control-metadata"},"Image Display Control metadata"),(0,r.kt)("p",null,"Nowadays an image file (e.g. JPEG, PNG) can contain this type of image regions\nin their metadata according to\n",(0,r.kt)("a",{parentName:"p",href:"https://iptc.org/std/photometadata/specification/IPTC-PhotoMetadata#image-region"},"the IPTC standard"),".\nThis React component uses\n",(0,r.kt)("a",{parentName:"p",href:"/javascript/"},"a library")," to let the back-end or front-end extract the regions\nfrom the image file. It then passes them to the ",(0,r.kt)("inlineCode",{parentName:"p"},"<img>")," tag and turns it into\n",(0,r.kt)("a",{parentName:"p",href:"/web-component/"},"a web component"),",\nwhich automatically and responsively zooms in on the best region."),(0,r.kt)("p",null,"Photographers, or anyone else, can use the\n",(0,r.kt)("a",{parentName:"p",href:"https://frameright.app/"},"Frameright webapp")," to define and store image regions in\nthe metadata of their pictures."),(0,r.kt)("h2",{id:"installation"},"Installation"),(0,r.kt)("p",null,"In your Node.js (e.g. using ",(0,r.kt)("a",{parentName:"p",href:"https://nextjs.org/"},"Next.js")," or\n",(0,r.kt)("a",{parentName:"p",href:"https://vitejs.dev/"},"Vite"),") run:"),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-bash"},"npm install @frameright/react-image-display-control\n")),(0,r.kt)("blockquote",null,(0,r.kt)("p",{parentName:"blockquote"},(0,r.kt)("strong",{parentName:"p"},"Less than 5kB in your final client-side bundle."))),(0,r.kt)("p",null,"\u2003"," \ud83d\udcbe ",(0,r.kt)("a",{parentName:"p",href:"/react/importing"}

1,"Importing in your project")),(0,r.kt)("h2",{id:"usage"},"Usage"),(0,r.kt)("pre",null,(0,r.kt)("code",{parentName:"pre",className:"language-tsx",metastring:"title=src/MyComponent.tsx",title:"src/MyComponent.tsx"},'import { ImageDisplayControl } from \'@frameright/react-image-display-control\';\n\nexport default function MyComponent() {\n  return (\n    <ImageDisplayControl>\n      <img\n        src="https://react.frameright.io/assets/pics/skater.jpg"\n        width="200"\n        height="200"\n      />\n    </ImageDisplayControl>\n  );\n}\n')),(0,r.kt)("p",null,"This doesn't change the structure of the resulting DOM, i.e.:"),(0,r.kt)("ul",null,(0,r.kt)("li",{parentName:"ul"},"the ",(0,r.kt)("inlineCode",{parentName:"li"},"<img>")," tag remains an ",(0,r.kt)("inlineCode",{parentName:"li"},"<img>")," tag, and"),(0,r.kt)("li",{parentName:"ul"},"no new parent elements are added around it, so"),(0,r.kt)("li",{parentName:"ul"},"the CSS rules that used to target the ",(0,r.kt)("inlineCode",{parentName:"li"},"<img>")," tag directly will still apply,\nand"),(0,r.kt)("li",{parentName:"ul"},"the ",(0,r.kt)("inlineCode",{parentName:"li"},"<img>")," tag will still naturally take the same space and position in the\nlayout.")),(0,r.kt)("p",null,"Other ",(0,r.kt)("inlineCode",{parentName:"p"},"<img>"),"-like elements/components are supported as well, e.g.\n",(0,r.kt)("a",{parentName:"p",href:"https://nextjs.org/docs/api-reference/next/image"},"Next.js ",(0,r.kt)("inlineCode",{parentName:"a"},"<Image>"),"s")," or\n",(0,r.kt)("a",{parentName:"p",href:"https://react-bootstrap.github.io/components/images/"},"React-Bootstrap ",(0,r.kt)("inlineCode",{parentName:"a"},"<Image>"),"s"),"."),(0,r.kt)("p",null,"\u2003"," \u2728 ",(0,r.kt)("a",{parentName:"p",href:"https://react.frameright.io"},"Live demo",(0,r.kt)(i.Z,{mdxType:"IconExternalLink"}))),(0,r.kt)("p",null,"\u2003"," \ud83d\udcbb ",(0,r.kt)("a",{parentName:"p",href:"https://codesandbox.io/s/image-display-control-react-component-m6qj9r"},"CodeSandbox",(0,r.kt)(i.Z,{mdxType:"IconExternalLink"}))))}u.isMDXComponent=!0}}]);