PathViewer

A react component that display the path to a given ressource using @sacercode/react-use-path.

🏗️ Installation

yarn add @sacercode/react-path-viewer

Or from GitHub 😺+🐙:

npm install git+https://github.com/Sacercode/react-path-viewer

⚙️ Usage and config

import PathViewer from '@sacercode/react-path-viewer';
import { usePath } from '@sacercode/react-use-path';
import React, { useRef } from 'react';

function App() {
    const pathData = usePath();
    const targetPathInputRef = useRef(null);

    return (
        <>
            <PathViewer
                pathData={pathData}
                suggestedKeys={[
                    ["key1", "key2", "key3"],
                    ["subkey1", "subkey2"],
                    ["finalKey"]
                ]}
                LastPathElement={ <div>LastPathElement</div> }
                onChange={ (e) => { console.log("e : %o", e) } }
                prepend={ <div>prependElement</div> }
                append={ <div>appendElement</div> }
            />

            <input ref={targetPathInputRef} />
            <button
                onClick={
                    () => {
                        pathData.goTo(targetPathInputRef.current.value);
                        targetPathInputRef.current.value = "";
                    }
                }
            >
                Go
            </button>
        </>
    );
}

export default App;