1.0.4 • Published 1 year ago

@lmtnolimit/react-iframe v1.0.4

Weekly downloads
-
License
MIT
Repository
github
Last release
1 year ago

Installation

  • npm
npm intall @lmtnolimit/react-iframe
  • yarn
yarn add @lmtnolimit/react-iframe

Usage

Just simply wrap the components you need using Iframe component

import { Iframe } from '@lmtnolimit/react-iframe';

const MyComponent = () => {
  return (
    <div>Hello world</div>
  )
}

const App = () => {
  const nodeRef = useRef()

  const head = (
    <>
      <link rel="stylesheet" href="/styles.css" />
      <title>Home</title>
    </>
  )

  return (
    <div className="App">
      <Iframe
        head={head}
        title={'Iframe Title'}
        className={''}
        onMount={() => {}}
        onUpdate={() => {}}
        ref={nodeRef}
      >
        <MyComponent>
      </Iframe>
    </div>
  )
}

To access Iframe window or document

import { useFrame } from '@lmtnolimit/react-iframe';

const MyComponent = () => {
  const { document: frameDocument, window: frameWindow } = useFrame();
  console.log(frameDocument, frameWindow)

  return (
    <div></div>
  )
}

Documentation

Props

This component supports all default props of the iframe extends with these below props

Prop nameDescriptionRequiredTypeDefault
headComponents that stay in the head tagfalseReactNodenull
mountTargetwhere the content should stay infalseHTMLElement
initialContentdefault srcDoctruestring<!DOCTYPE html><html><head></head><body></body></html>
onMounttrue() => {}
onUpdatetrue() => {}

License

MIT

1.0.4

1 year ago

1.0.3

1 year ago

1.0.2

1 year ago

1.0.1

1 year ago

1.0.0

1 year ago