tiaanduplessis / react-pagemap

React wrapper for pagemap. Mini map for web pages.

react-pagemap

React wrapper for pagemap. Mini map for web pages.

Install

npm install --save react-pagemap

Usage

import React, { Component } from 'react'
import PageMap from 'react-pagemap'

const Example = () => {
  return (
    <main>
      <PageMap/>
      <h1>Hello</h1>
    </main>
  )
}

Default props

PageMap.defaultProps = {
  viewport: null,
  styles: {
    container: {
      position: 'fixed',
      top: '8px',
      right: '8px',
      width: '100px',
      height: '100%',
      zIndex: '100'
    },
    'header,footer,section,article': 'rgba(0, 0, 0, 0.08)',
    'h1,a': 'rgba(0, 0, 0, 0.10)',
    'h2,h3,h4': 'rgba(0, 0, 0, 0.08)'
  },
  back: 'rgba(0, 0, 0, 0.02)',
  view: 'rgba(0, 0, 0, 0.05)',
  drag: 'rgba(0, 0, 0, 0.10)',
  interval: null
}

See pagemap docs for more information.

License

MIT © tiaanduplessis

---

This hook is created using create-react-hook.