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 @fmmp/react

Adding Form Minimap

Before

    function App() {
        return (
            <div className="App">
                <form>
                    <input id="Input1"/><br/>
                    <input id="Input2"/><br/>
                    <input id="Input3"/><br/>
                    <input id="Input4"/>
                </form>
            </div>
        );
    }

    export default App;

After

    import React from 'react';
    import { FmmReactMinimapT, FmmReactPanelT } from '@fmmp/react';

    function App() {
        var anchorRef = React.useRef();
        var panelRef = React.useRef();
        var css = '.fmm-frame { height: 50px; } .fmm-panel { height: 0; }';
        return (
            <div className="App">
                <style>{css}</style>
                <div ref={anchorRef} style={{width:'20px', height:'20px', marginLeft:'200px'}}></div>
                <FmmReactPanelT ref={panelRef}/>
                <form>
                    <FmmReactMinimapT 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 FmmReactMinimapT or useFmmReactMinimap.

Method
destructor
takeSnapshot

FmmReactMinimapT

Component to create and manage a FmmReactMinimap. The minimap is detached when this component is destroyed.

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

useFmmReactMinimap

Hook version of FmmReactMinimapT 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 FmmReactMinimapT.

FmmReactPanel

Adapter for FmmPanel returned from FmmReactPanelT or useFmmReactPanel.

Method
destroyDetached

FmmReactPanelT

Component to create and manage a FmmReactPanel.

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

useFmmReactPanel

Hook version of FmmReactPanelT that returns a FmmReactPanel.

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

FmmReactStoreT

Component to create and manage a FmmStore.

Property	Type	Required
errors	FmmMapErrors
values	FmmMapValues	✓

useFmmReactStore

Hook version of FmmReactStoreT that returns a FmmStore.

Parameter	Type	Required
values	FmmMapValues	✓
errors	FmmMapErrors

Usage no npm install needed!