https://github.com/brunocarvalhodearaujo/react-sandbox-frame

react customizable and declarative iframe
https://github.com/brunocarvalhodearaujo/react-sandbox-frame

customize frame iframe react

Last synced: 2 months ago
JSON representation

react customizable and declarative iframe

• Host: GitHub
• URL: https://github.com/brunocarvalhodearaujo/react-sandbox-frame
• Owner: brunocarvalhodearaujo
• Created: 2017-05-25T18:11:13.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2018-09-06T20:43:48.000Z (over 6 years ago)
• Last Synced: 2024-08-10T23:44:03.760Z (5 months ago)
• Topics: customize, frame, iframe, react
• Language: JavaScript
• Homepage:
• Size: 118 KB
• Stars: 4
• Watchers: 2
• Forks: 1
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
React Sandbox Frame

===================

[![npm version](https://badge.fury.io/js/react-sandbox-frame.svg)](http://badge.fury.io/js/react-sandbox-frame)

[![License](https://img.shields.io/npm/l/react-sandbox-frame.svg)](https://www.npmjs.com/package/react-sandbox-frame) 

[![Dependency Status](https://david-dm.org/brunocarvalhodearaujo/react-sandbox-frame.svg?style=flat-square)](https://david-dm.org/brunocarvalhodearaujo/react-sandbox-frame)

[![devDependency Status](https://david-dm.org/brunocarvalhodearaujo/react-sandbox-frame/dev-status.svg?style=flat-square)](https://david-dm.org/brunocarvalhodearaujo/react-sandbox-frame#info=devDependencies)

[![npm](https://img.shields.io/npm/dt/react-sandbox-frame.svg)](https://github.com/brunocarvalhodearaujo/react-sandbox-frame)

this package create an customizable and declarative iframe

## usage

``````js

import React, { Component } from 'react'

import Frame from 'react-sandbox-frame'

export class WebView extends Component {

  /**

   * connect frame and you component

   * @param {HTMLElement} document

   */

  onLoad (document) {

    console.log(document) // output 
hello world

  }


  render () {

    return (

      

        
hello world

      

    )

  }


}

``````

## Optional Props

The `Frame` component takes a couple of props that you can use to customize its behaviour:

  - `children [?element]`

  - `onLoad [?function]`

  - `src [?string]`

  - `style [?object]`

  - `title [?string=page-wrapper]`

  - `stylesheets [?Array=[]]`

  - `scripts [?Array=[]]`