@eafmm/react v4.0.1

Form Minimap React

React components and hooks for Form Minimap. Please consult that documentation for further information on the concepts mentioned below.

Demo Appplication

Getting Started

Installation

npm install --save @fmm/react

Adding Form Minimap

The code sample below shows the lines added to a simple form to add a minimap (M) or a minimap with panel (P)

M P         import React from 'react';
M           import { FmmReactMinimapTag } from '@eafmm/react';
  P         import { FmmReactMinimapTag, FmmReactPanelTag } from '@eafmm/react';

            function App() {
M P             var anchorRef = React.useRef();
  P             var panelRef = React.useRef();
M               var css = '.fmm-frame { height: 50px; }';
  P             var css = '.fmm-frame { height: 50px; } .fmm-panel { height: 0; }';
                return (
                    <div className="App">
M P                     <style>{css}</style>
M P                     <div ref={anchorRef} style={{width:'20px', height:'20px', marginLeft:'200px'}}></div>
  P                     <FmmReactPanelTag ref={panelRef}/>
                        <form>
M                           <FmmReactMinimapTag anchorRef={anchorRef} title='Title'/>
  P                         <FmmReactMinimapTag anchorRef={anchorRef} panelRef={panelRef} title='Title'/>
                            <input id="Input1"/><br/>
                            <input id="Input2"/><br/>
                            <input id="Input3"/><br/>
                            <input id="Input4"/>
                        </form>
                    </div>
                );
            }

            export default App;

API

FmmReactMinimap

Adapter for FmmMinimap returned from FmmReactMinimapTag or useFmmReactMinimap.

| Method | --- | destructor | takeSnapshot

FmmReactMinimapTag

Component to create and manage a FmmReactMinimap. The minimap is detached when this component is destroyed. For minimaps in a panel, use the panelRef property; otherwise use the anchorRef for a popup minimap.

useFmmReactMinimap

Hook version of FmmReactMinimapTag that returns a FmmReactMinimap.

FmmReactPanel

Adapter for FmmPanel returned from FmmReactPanelTag or useFmmReactPanel.

| Method | --- | destroyDetached

FmmReactPanelTag

Component to create and manage a FmmReactPanel.

useFmmReactPanel

Hook version of FmmReactPanelTag that returns a FmmReactPanel.

FmmReactStoreTag

Component to create and manage a FmmStore.

useFmmReactStore

Hook version of FmmReactStoreTag that returns a FmmStore.