README

Form Minimap React

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

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               var parentRef = React.useRef();
  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                       <div ref={parentRef} style={{width:'70px', height:'50px', marginLeft:'200px'}}></div>
  P                     <div ref={anchorRef} style={{width:'20px', height:'20px', marginLeft:'200px'}}></div>
  P                     <FmmReactPanelTag ref={panelRef}/>
                        <form>
M                           <FmmReactMinimapTag parentRef={parentRef} 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 parentRef property to show an always-visible minimap, or anchorRef for a popup minimap.

Property	Type	Required
aggregateLabels	FmmMapString
anchorRef	React.RefObject<HTMLElement>
customElementIds	string[]
debounceMsec	number
dynamicLabels	string[]
framework	FmmFramework
onUpdate	FmmOnUpdate
pageRef	React.RefObject<HTMLElement>
panelRef	React.RefObject<FmmReactPanel>
parentRef	React.RefObject<HTMLElement>
storeRef	React.RefObject<FmmStore>
title	string	✓
usePanelDetail	boolean
useWidthToScale	boolean
verbosity	number
zoomFactor	number

useFmmReactMinimap

Hook version of FmmReactMinimapTag that returns a FmmReactMinimap.

Parameter	Type	Required	Description
key	string	✓	Minimap is recreated when key changes. Any previous minimap is detached.
form	React.RefObject<HTMLFormElement>	✓
p	FmmReactMinimapProps	✓	Object with properties of FmmReactMinimapTag.

FmmReactPanel

Adapter for FmmPanel returned from FmmReactPanelTag or useFmmReactPanel.

Method
destroyDetached

FmmReactPanelTag

Component to create and manage a FmmReactPanel.

Property	Type	Required
detailParentRef	React.RefObject<HTMLDivElement>
vertical	boolean

useFmmReactPanel

Hook version of FmmReactPanelTag that returns a FmmReactPanel.

Parameter	Type	Required
hostRef	string	✓
detailParentRef	React.RefObject<HTMLDivElement>
vertical	boolean

FmmReactStoreTag

Component to create and manage a FmmStore.

Property	Type	Required
errors	FmmMapErrors
values	FmmMapValues	✓

useFmmReactStore

Hook version of FmmReactStoreTag that returns a FmmStore.

Parameter	Type	Required
values	FmmMapValues	✓
errors	FmmMapErrors

Usage no npm install needed!