{"_id":"@besync/react-use-iframe","_rev":"2-b7c10f8209614a994dfa33fb1aec5f5d","name":"@besync/react-use-iframe","dist-tags":{"latest":"1.0.8"},"versions":{"1.0.8":{"name":"@besync/react-use-iframe","version":"1.0.8","main":"dist/cjs/index.ts","module":"dist/esm/index.js","typings":"dist/index.d.ts","ts:main":"src/index.ts","repository":{"type":"git","url":"https://github.com/besync/graphstore"},"author":{"name":"BeSync"},"license":"Apache-2.0","dependencies":{"@evecalm/message-hub":"^0.0.10","react-resize-detector":"^3.2.0","tslib":"^1.9.3"},"peerDependencies":{"react":"next"},"publishConfig":{"access":"public"},"scripts":{"prebuild":"berun-dev clean","build":"berun-dev build && berun-dev build -- -m CommonJS --outDir dist/cjs","prepare":"berun-dev build -- --emitDeclarationOnly","test":"berun-dev test --env=jsdom","coverage":"berun-dev test --env=jsdom --coverage","prepublishOnly":"yarn lint && yarn build","lint":"berun-dev lint"},"gitHead":"e615349a58c02e387768ee15044fbda237c6818b","description":"## About","_id":"@besync/react-use-iframe@1.0.8","dist":{"shasum":"67aaa1d62aad786fb5b086d5601c57c0a71e0b4a","integrity":"sha512-vzPhU/Nx47nyhWjqbrC0CEfL8RS1prlc6AYF19D+OwK+XdBGM/rpkGx7a46/P4/3/VX1Pyt3bfsecA8Lc5oQ/Q==","tarball":"https://registry.npmjs.org/@besync/react-use-iframe/-/react-use-iframe-1.0.8.tgz","fileCount":26,"unpackedSize":28958,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb51TFCRA9TVsSAnZWagAA2nMP/2rUGiCIAezcfOjxbnrl\ngksbQbEJqfJKIPcpsg5+liBqDLeOG9c5/f6tKEbP9aNPHJOaEdgEDafOa/sp\nWd1EsbTXlztaqGKnkuQ8OYJX1YzsSsIWwVZJgyleCHfTKsSZeUQmdalXHEtd\nU3bdelbYwsZ23j2nGE4guAZgGN6TKZh5DQFDLIoNv10nRYMNSm3jIbzXpazw\nbBpXqr0ZQ4vpQHv9B8eGjLX7vvqiTuiEc6EkTKCzOClVvlkamG844k+Z6Zgy\n5j94I2TygGINw9jisPuH30leOyqu7qnJGVWmKzOzLUe3isuAQedyUQ44VGnq\n6nJmte8dJzJKcSTeqDpgwpXQy+h+YDSp4gBtj/Vg8wbdTWcYdgT/sZghzcN/\n/C+D2Zt6WRUTsZXTCn1ZQnLG5SGApl8p+PrtiLrOquBHew8AkHxY83AKeFMc\nenjYXGYwtgtH18PL/qe1R7gNwh3/suNxIwCClUb0Ye5JU4Ls8GWorfp6BnD5\nY8RR7wfAO7PfxiEAqze7g3m7eX1N/O/dGmjrHJv6tYl8EXpn3wRFE7v33JPf\n3PsC7s6gP6mfm56DhXKh8qi/9eiinluyISy07rItirw64S3uOB/7mODvuKC2\n/JY94Fe1LeUqW9gaQxLGvkYrEgyPtNmGPwHhE7bpAyAGU+OwY7AghU+JV2Hb\nPLft\r\n=HV+y\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDBGOFkth0puIrP0Vx6NH5mn27DCGRz2hBZTPJ9yyNpQgIgZCSMGg4CMqqdPSjB+L9BgMhMlM8kNnGvtmrLv7G0zvA="}]},"maintainers":[{"name":"guycreate","email":"guy@nodekit.io"}],"_npmUser":{"name":"guycreate","email":"guy@nodekit.io"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-use-iframe_1.0.8_1541887172729_0.8178219642175755"},"_hasShrinkwrap":false}},"time":{"created":"2018-11-10T21:59:32.667Z","1.0.8":"2018-11-10T21:59:32.902Z","modified":"2022-04-04T18:33:58.778Z"},"maintainers":[{"email":"admin@tinia.org","name":"tinialabs1"},{"email":"guy-nodekit@barnardmail.net","name":"guycreate"}],"description":"## About","repository":{"type":"git","url":"https://github.com/besync/graphstore"},"author":{"name":"BeSync"},"license":"Apache-2.0","readme":"# React Hook for embedded Cross-Domain IFrames and Web Workers with 2 Way RPC Communication Channel\n\n## About\n\nThis is a light-weight React Hook for inserting an iFrame into a React element.\n\nIt solves the issues associated with passing objects, events and function calls between parent and child, especially in Cross Domain situations. This allows expensive work and/or security-sensitive work to be offloaded to sandboxed child iframes.\n\nOptionally includes a zero-configuration, batteries included, runner for Webpack that automatically creates separate host and child entry points and HTML pages.\n\n## Features\n\n- Written for modern (2019+) React\n- Custom positioning anywhere in your host React component with `{iframe}`\n- iframe may contain any content including React components, third party widgets, etc.\n- Automatic resizing of parent <iframe> DOM element height whenever child content changes\n- Pass thru required props to iframe, such as `src`\n- Secure, two way communication between host and child with `iopa` or `koa` style middleware API\n- Works for both same domain and cross domain situations\n- Typescript definitions included\n- No component classes or separate state manager required, pure React Hooks that can be used in function components\n\n## Requirements\n\nReact 16.7 or later\n\n## installation\n\n```bash\n$ npm install @besync/react-use-iframe\n```\n\n```js\nimport { useFrame } from '@besync/react-use-iframe'\n```\n\n```js\nimport { useChildFrame } from '@besync/react-use-iframe'\n```\n\n## Usage (Parent)\n\n```js\n/// app.js\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport { useFrame } from '@besync/react-use-iframe'\n\nconst App = props => {\n  const iframe = useFrame({ src: './frame.html' }, channel => {\n    channel.use((context, next) => {\n      console.log('request from iframe', context.request)\n      next()\n    })\n\n    channel.route('page-title', (context, next) => {\n      context.response = document.title\n    })\n  })\n\n  return (\n    <div>\n      Hello World\n      {iframe}\n    </div>\n  )\n}\n\nReactDOM.render(<App />, document.getElementById('root'))\n```\n\n## Usage (Child React example)\n\n```js\n// ./src/frame.[js, tsx]\nimport React from 'react'\nimport ReactDOM from 'react-dom'\nimport { useChildFrame } from '@besync/react-use-iframe'\n\nconsole.log('FRAME STARTED')\n\nconst framehelper = useChildFrame(channel => {\n  channel.use((context, next) => {\n    console.log('request from parent', context.request)\n    return next()\n  })\n\n  channel.route('getName', (context, next) => {\n    context.response = 'myNameisMyPassport'\n  })\n\n  document.body.addEventListener('click', e => {\n    // use ready to make sure the iframe is ready\n    // (useChilfFrame channel callback is called before DOM is rendered)\n    channel.ready().then(() =>\n      channel.fetch('page-title', 'myparameter').then(resp => {\n        console.log('response from outer', resp)\n      })\n    )\n  })\n})\n\nconst App = () => {\n  return (\n    <div>\n      This is the iFramne\n      {framehelper}\n    </div>\n  )\n}\n\nReactDOM.render(<App />, document.getElementById('root'))\n```\n\n## Webpack Build\n\nYou need to make sure there are two separate entry points in Webpack (one for the main\njavascript, one for the iFrame specific javascript) and two separate HTML files created by the HTML Plugin.\n\nThe simplest way to do this is with [`@breun/scripts`](https://github.com/bestyled/berun):\n\n### @berun configuration\n\n```js\n// config/berun.config.js\nmodule.exports = {\n  use: [\n    '@berun/preset-react',\n    '@berun/runner-eslint',\n    require('@besync/react-use-iframe/berun')\n  ]\n}\n```\n\n`package.json`\n\n```json\n{\n  \"scripts\": {\n    \"start\": \"berun-scripts start\",\n    \"build\": \"berun-scripts build\",\n    \"format\": \"berun-scripts lint\",\n    \"test\": \"berun-scripts test --env=jsdom\",\n    \"eject\": \"berun-scripts eject\"\n  },\n  \"dependencies\": {\n    \"react\": \"next\",\n    \"react-dom\": \"next\",\n    \"@besync/react-use-iframe\": \"...\"\n  },\n  \"devDependencies\": {\n    \"@berun/scripts\": \"...\",\n    \"@berun/preset-react\": \"...\",\n    \"@berun/runner-eslint\": \"...\"\n  },\n  \"resolutions\": {\n    \"babel-core\": \"^7.0.0-bridge.0\"\n  }\n}\n```\n\n## Prior Art\n\n- `maslianok/react-resize-detector` - Used in the iFrame component to communicate resize events to the parent\n- `@evecalm/message-hub` - Used for the two way RPC between parent and child\n- `@bestyled/berun` - Used to provide a zero configuration, batteries included, Webpack build, similar to `create-react-app`\n- `react-use` - Used as inspiration for the React Hooks introduced in React 16.7; not used as a dependency\n- `useState`, `useRef`, and `useEffects` introduced in React 16.7\n\n## License\n\nApache 2.0\n","readmeFilename":"README.md"}