@microsoft/fast-viewer-react
    TypeScript icon, indicating that this package has built-in type declarations

    4.1.1 • Public • Published

    FAST Viewer React

    FAST Viewer React has been deprecated. Use FAST Tooling React instead.

    A React component which shows content in an iframe via a provided route. This can be used to as a method for previewing a React component(s) or an entire page.

    Installation

    npm i --save @microsoft/fast-viewer-msft

    Basic usage

    An example of using one of the components from the @microsoft/fast-viewer-msft package:

    import * as React from "react";
    import * as ReactDOM from "react-dom";
    import Viewer from "@microsoft/fast-viewer-msft";
     
    const root = document.createElement("div");
    root.setAttribute("id", "root");
    document.body.appendChild(root);
     
    function render() {
        ReactDOM.render(
            <Viewer iframeSrc={"/example-content"} />,
            root
        );
    }
     
    render();

    Advanced usage

    There are other components in this package which when used in conjunction with the Viewer will allow for setting height and width for devices and the control of components and their data.

    SelectDevice

    Use the SelectDevice component to select from provided default devices or provide your own custom device configurations. This component accepts a list of configured devices via the devices prop, some default devices are included with the package as a secondary export. It also accepts an activeDeviceId prop which maps to the current device id of the provided devices. In addition there is a callback onUpdateDevice which will fire a provided function with the new device id selected.

    Example:

    import {
        defaultDevices,
        SelectDevice,
    } from "@microsoft/fast-viewer-msft";
     
    <SelectDevice
        devices={defaultDevices}
        onUpdateDevice={this.handleDeviceUpdate}
        activeDeviceId={this.state.activeDevice.id}
    />

    devices

    A device can be either "responsive" or "fixed", if it is responsive it does not take a width and height, if it is fixed it does. When the Viewer has been set to use a responsive display, it will show resize handles on the left, right, bottom and bottom corners.

    Example of custom devices passed to the devices prop:

    [
        {
            "id": "responsive",
            "displayName": "Responsive display",
            "display": "responsive"
        },
        {
            "id": "phoneDevice",
            "displayName": "Phone device",
            "display": "fixed",
            "height": 800,
            "width": 320
        }
    ]

    onUpdateDevice

    This callback will fire when an option has been selected from the dropdown and give back the clicked items activeDeviceId.

    Example of a callback passed to onUpdateDevice prop:

    handleDeviceUpdate(activeDeviceId) {
        this.setState({
            activeDeviceId: activeDeviceId
        });
    }

    activeDeviceId

    This is the active device id as indicated by the devices array. This should exist on the state of the parent component.

    Rotate

    Use the Rotate component to switch between landscape and portrait view. This component accepts an orientation prop which can be either "landscape" or "portrait". It also accepts an onUpdateOrientation callback which will fire a provided function with the new orientation selected.

    Example:

    import {
        Rotate,
    } from "@microsoft/fast-viewer-msft";
     
    <Rotate
        orientation={this.state.orientation}
        onUpdateOrientation={this.handleOrientationUpdate}
    />

    orientation

    This is can be set to "landscape" or "portrait".

    onUpdateOrientation

    This callback will fire when one of the buttons is clicked to change to "landscape" or "portrait" to indicate which one should be activated.

    Example:

    handleOrientationUpdate(orientation) {
        this.setState({
            orientation: orientation
        });
    }

    Putting it all together for the Viewer

    After including any combination of the SelectDevice and Rotate components, the viewer should have added props tied to your state which will update.

    Example:

    <Viewer
        height={this.state.height}
        width={this.state.width}
        iframeSrc={"/example-content"}
        responsive={this.state.activeDevice.display === Display.responsive}
        onUpdateHeight={this.handleUpdatedHeight}
        onUpdateWidth={this.handleUpdatedWidth}
    />

    Allowing live messaging to update components in the iframe

    Using the Viewer when the provided iframeSrc is pointing to a route that contains the ViewerContent component.

    Example:

    <Viewer
        iframeSrc={"/example-content"}
        viewerContentProps={[{id: "example", props: {}}]}
    />

    Using the ViewerContent on the route provided to the Viewer will allow for the dynamic creation of provided components.

    Example component provided in the "/example-content" route for the Viewer impplementation example:

    import * as React from "react";
    import { ViewerContent } from "@microsoft/fast-viewer-msft";
    import MyComponent from "./my-component";
     
    class ExampleContent extends React.Component<{}, {}> {
        public render(): JSX.Element {
            return <ViewerContent components={[{id: "example", component: MyComponent }]} />;
        }
    }
     
    export default UpdatePropsViewerContent;

    Install

    npm i @microsoft/fast-viewer-react

    DownloadsWeekly Downloads

    62

    Version

    4.1.1

    License

    MIT

    Unpacked Size

    439 kB

    Total Files

    99

    Last publish

    Collaborators

    • microsoft1es
    • fastsvc
    • chrisdholt
    • awentzel
    • janechu
    • fluentweb
    • nirice