National Park of Minnesota

    @component-controls/viewport-plugin
    TypeScript icon, indicating that this package has built-in type declarations

    3.15.0 • Public • Published

    Table of contents

    In action

    Example site

    Overview

    inspired by the playroom project, this addon contains a ViewportBlock that you can integrate into any page, as well as a standalone ViewportPage

    Getting Started

    Install

    yarn add @component-controls/viewport-plugin --dev

    Configure route

    in .config/buildtime.js

        const { defaultBuildConfig } = require('@component-controls/core');
    
        module.exports = {
          stories: [
            ...
          ],
          pages: {
            story: {
              tabs: [
                ...defaultBuildConfig.pages.story.tabs,
                { route: 'viewport' },
              ],
            },
          },
        }
    

    Configure page display

    in .config/runtime.tsx

        import React from 'react';
        import { RuntimeConfiguration, defaultRunConfig } from "@component-controls/core";
        import { ViewportPage } from "@component-controls/viewport-plugin";
    
        const config: RuntimeConfiguration = {
          pages: {
            story: {
              tabs: [
                ...defaultRunConfig.pages.story.tabs,
                { title: 'Viewport', render: () => <ViewportPage /> },
              ],
            },
          },
    
        };
    
        export default config;
    

    API

    ViewportBlock

    ViewportBlock source code

    properties

    Name Type Description
    sizes Record<string, number>
    sxContainer ThemeUIStyleObject
    title string optional section title for the block.
    description string optional markdown description.
    id string optional id to be used for the block if no id is provided, one will be calculated automatically from the title.
    collapsible boolean if false, will nothave a collapsible frame.
    data-testid string testing id
    plain boolean inner container variant or plain
    sx ThemeUIStyleObject
    ref ((instance: HTMLDivElement) => void) | RefObject<HTMLDivElement>
    name string

    ViewportBox

    ViewportBox source code

    properties

    Name Type Description
    storyId string
    size* number
    sizeLabel* string

    Install

    npm i @component-controls/viewport-plugin@3.15.0

    Version

    3.15.0

    License

    MIT

    Unpacked Size

    253 kB

    Total Files

    24

    Last publish

    Collaborators

    • atanasster