Apeman-react-frame NPM

apeman-react-frame

apeman react package for iframe components.

Installation

$ npm install apeman-react-frame --save

Demo

Live demo is hosted on GitHub Pages.

Usage

'use strict'

import React from 'react'
import {ApFrame, ApFrameStyle} from 'apeman-react-frame'
import {ApSpinnerStyle} from 'apeman-react-spinner'

const ExampleComponent = React.createClass({
  render () {
    return (
      <div>
        <ApSpinnerStyle />
        <ApFrameStyle/>
        <ApFrame width="100%"
                 height={ 240 }
                 src="./foo/bar.html"
                 alt="Resource not found"/>
      </div>
    )
  }
})

Components

ApFrameStyle

Props

Name	Type	Default
style	object	{}
highlightColor	string	ApStyle.DEFAULT_HIGHLIGHT_COLOR
backgroundColor		ApStyle.DEFAULT_BACKGROUND_COLOR

ApFrame

Props

Name	Type	Default	Description
src	string	null		Source URL string
spinner	string	ApSpinner.DEFAULT_THEME		Theme of spinner
full	bool	false		Display with full screen
width	number	string	'auto'		Component width
height	number	string	'auto'		Component height
iframeRef	func			Ref to iframe

ApMarkableFrame

Props

Name	Type
detectableSelector	string	Selector for detectable elements
onDetect	func	Handler for detection
highlightSelector	string	Selector for highlight
onMarkableTap	func	Handler for tap on markable
onMarkableHoverIn	func	Handler for hover-in on markable
onMarkableHoverOut	func	Handler for hover-out on markable