Have ideas to improve npm?Join in the discussion! »

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

    3.14.6 • Public • Published

    Table of contents

    In action

    Example site

    Overview

    This addon contains an ImagesBlock that you can integrate into any page, as well as a standalone ImagesPage

    Getting Started

    Install

    yarn add@component-controls/addon-images --dev

    Add to a document

    The images will be assigned to all the stories in the current document

    in mystory.stories.tsx

    import { Document } from '@component-controls/core';
    import main_screen from './media/main-screen.jpg';
    
    export default {
      title: 'MyStory',
      plugins: {
        images: {
          title: 'Screen design',
          items: [main_screen],
        },
      },
    } as Document;
    

    Add to a story

    The images will be assigned only to a specific story. This allows multiple stories in the document to have different images associated with them.

    in mystory.stories.tsx

    import React from 'react';
    import { Document, Example } from '@component-controls/core';
    import main_screen from './media/main-screen.jpg';
    
    export default {
      title: 'MyStory',
    } as Document;
    
    export const story: Example = () => <Button>click me</Button>;
    
    story.design = {
      plugins: {
        images: [main_screen],
      },
    };
    

    Insert into an MDX document

    in mystory.mdx

    ---
    title: MyStory
    ---
    import { ImagesBlock } from '@component-controls/addon-images';
    import login_screen from './media/login-screen.jpg';
    import logout_screen from './media/logout-screen.jpg';
    
    <ImagesBlock
      items={[login_screen, logout_screen]}
    />
    

    Configure props globally

    You can globally change the default options of the NotesBlock component

    in .config/runtime.tsx

    import { RuntimeConfiguration } from "@component-controls/core";
    
    const config: RuntimeConfiguration = {
      ...
      components: {
        images: {
          title: 'Screenshots'
        }
      },
    };
    
    export default config;
    

    API

    ImagesBlock

    ImagesBlock source code

    properties

    Name Type Description
    items (string | { [key: string]: any; src: string; })[]
    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

    Install

    npm i @component-controls/addon-images

    DownloadsWeekly Downloads

    134

    Version

    3.14.6

    License

    MIT

    Unpacked Size

    242 kB

    Total Files

    21

    Last publish

    Collaborators

    • avatar