1"use strict";(self.webpackChunkframeright_docs=self.webpackChunkframeright_docs||[]).push([[8036],{3905:(e,t,r)=>{r.d(t,{Zo:()=>m,kt:()=>f});var n=r(7294);function o(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function a(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function i(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?a(Object(r),!0).forEach((function(t){o(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):a(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function c(e,t){if(null==e)return{};var r,n,o=function(e,t){if(null==e)return{};var r,n,o={},a=Object.keys(e);for(n=0;n<a.length;n++)r=a[n],t.indexOf(r)>=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n<a.length;n++)r=a[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}var l=n.createContext({}),p=function(e){var t=n.useContext(l),r=t;return e&&(r="function"==typeof e?e(t):i(i({},t),e)),r},m=function(e){var t=p(e.components);return n.createElement(l.Provider,{value:t},e.children)},s="mdxType",u={inlineCode:"code",wrapper:function(e){var t=e.children;return n.createElement(n.Fragment,{},t)}},d=n.forwardRef((function(e,t){var r=e.components,o=e.mdxType,a=e.originalType,l=e.parentName,m=c(e,["components","mdxType","originalType","parentName"]),s=p(r),d=o,f=s["".concat(l,".").concat(d)]||s[d]||u[d]||a;return r?n.createElement(f,i(i({ref:t},m),{},{components:r})):n.createElement(f,i({ref:t},m))}));function f(e,t){var r=arguments,o=t&&t.mdxType;if("string"==typeof e||o){var a=r.length,i=new Array(a);i[0]=d;var c={};for(var l in t)hasOwnProperty.call(t,l)&&(c[l]=t[l]);c.originalType=e,c[s]="string"==typeof e?e:o,i[1]=c;for(var p=2;p<a;p++)i[p]=r[p];return n.createElement.apply(null,i)}return n.createElement.apply(null,r)}d.displayName="MDXCreateElement"},2235:(e,t,r)=>{r.d(t,{P:()=>a});var n=r(7294),o=r(9960);function a(e){let{href:t}=e;return n.createElement(o.Z,{className:"github-corner-icon",href:t},n.createElement("img",{src:"/img/thirdparty/github-mark.svg",alt:"GitHub repository"}))}},3410:(e,t,r)=>{r.r(t),r.d(t,{assets:()=>p,contentTitle:()=>c,default:()=>d,frontMatter:()=>i,metadata:()=>l,toc:()=>m});var n=r(7462),o=(r(7294),r(3905)),a=r(2235);const i={sidebar_position:40,tags:["howto"]},c="Local demo",l={unversionedId:"react/example",id:"react/example",title:"Local demo",description:"\x3c!--",source:"@site/docs/react/example.md",sourceDirName:"react",slug:"/react/example",permalink:"/react/example",draft:!1,editUrl:"https://github.com/frameright/docs.frameright.io/tree/main/docs/react/example.md",tags:[{label:"howto",permalink:"/tags/howto"}],version:"current",sidebarPosition:40,frontMatter:{sidebar_position:40,tags:["howto"]},sidebar:"documentationSidebar",previous:{title:"Importing in your project",permalink:"/react/importing"},next:{title:"Supported environments",permalink:"/react/environments"}},p={},m=[],s={toc:m},u="wrapper";function d(e){let{components:t,...r}=e;return(0,o.kt)(u,(0,n.Z)({},s,r,{components:t,mdxType:"MDXLayout"}),(0,o.kt)("h1",{id:"local-demo"},"Local demo"),(0,o.kt)(a.P,{href:"https://github.com/Frameright/react-image-display-control",mdxType:"GitHubCornerIcon"}),(0,o.kt)("admonition",{type:"info"},(0,o.kt)("p",{parentName:"admonition"},"If you haven't already, check out the source code before proceeding:"),(0,o.kt)("pre",{parentName:"admonition"},(0,o.kt)("code",{parentName:"pre",className:"language-bash"},"git clone https://github.com/Frameright/react-image-display-control\ncd react-image-display-control/\n"))),(0,o.kt)("p",null,"A local demo can be run with:"),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-bash"},"cd example/\n./clean-build-and-run.sh\n")))}d.isMDXComponent=!0}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.