Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@storybook/addon-controls

Package Overview
Dependencies
Maintainers
12
Versions
1476
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@storybook/addon-controls

Interact with component inputs dynamically in the Storybook UI

  • 0.0.0-pr-29756-sha-18442450
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
5.8M
increased by10.85%
Maintainers
12
Weekly downloads
 
Created

What is @storybook/addon-controls?

The @storybook/addon-controls package allows developers to interact with component inputs dynamically within the Storybook UI. It provides a way to edit props, slots, styles, and other arguments of the components being tested in real-time. This addon generates a user interface for tweaking these inputs without needing to write any additional code.

What are @storybook/addon-controls's main functionalities?

Dynamic Props Editing

Allows users to dynamically edit the props of a component from within the Storybook UI. The code sample shows how to set up controls for a Button component, including a color picker for the backgroundColor prop and an action logger for the onClick event.

export default {
  title: 'Button',
  component: Button,
  argTypes: {
    backgroundColor: { control: 'color' },
    onClick: { action: 'clicked' }
  },
};

const Template = (args) => <Button {...args} />;

export const Primary = Template.bind({});
Primary.args = {
  primary: true,
  label: 'Button',
};

Custom Controls

Enables the creation of custom controls for component arguments, such as dropdowns, checkboxes, and more. The code sample demonstrates how to create a select control for the 'size' prop of an Input component.

export default {
  title: 'Form/Input',
  component: Input,
  argTypes: {
    size: {
      control: {
        type: 'select',
        options: ['small', 'medium', 'large']
      }
    }
  }
};

const Template = (args) => <Input {...args} />;

export const Medium = Template.bind({});
Medium.args = {
  size: 'medium',
  placeholder: 'Type here...'
};

Live Editing of Args

Provides a way to live edit the 'args' of a story, which are the arguments that get passed to the component being rendered. The code sample shows a text control for the 'content' prop of a Panel component.

export default {
  title: 'Dashboard/Panel',
  component: Panel,
  argTypes: {
    content: { control: 'text' }
  }
};

const Template = (args) => <Panel {...args} />;

export const DefaultPanel = Template.bind({});
DefaultPanel.args = {
  content: 'Default content',
};

Other packages similar to @storybook/addon-controls

Keywords

FAQs

Package last updated on 30 Nov 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc