react-simple-minimap

A Minimap gives you a high level overview of your page or component which is very useful for quick navigation or page preview

Usage no npm install needed!

<script type="module">
  import reactSimpleMinimap from 'https://cdn.skypack.dev/react-simple-minimap';
</script>

README

react-simple-minimap

A React Minimap component based of visual studio's preview minimap

🗾 Gives you a high level overview of your page or component which is very useful for quick navigation or page preview

NPM JavaScript Style Guide

Install

yarn add react-simple-minimap

Usage

import React, { Component } from 'react'

import Minimap from 'react-simple-minimap'

class Page extends Component {
  renderPage = () => (
    <>
      <Header>...</Header>
      <Main>...</Main>
      <Footer>...</Footer>
    </>
  )

  render() {
    return (
      <>
        <Minimap of={this.renderPage()} />
        {this.renderPage()}
      </>
    )
  }
}

Props

Property Type Default Required? Description
of Node null ✓ The component to be previewed, normally a page
width number 114 Minimap width in pixels
height number or string 300 Minimap height can be any unit

License

MIT © antoniojps