New
Integrate Next.js and Storybook automaticallyAutomate with Chromatic
Star75,440
Back to integrations
Add your integration
Categories
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon
Addon Version
Add package or component version to the Storybook toolbar
npm install storybook-version
Last updated 11 months ago
9.5k
Downloads per week
Readme View on GitHub

Storybook Addon Version

The Storybook Addon Version is used to highlight the version of a component or of a package within Storybook toolbar.

Installation

npm install storybook-version --save-dev

Basic Setup

Add the following code in the main.js of your Storybook configuration:

module.exports = {
  addons: ['storybook-version'],
};

Set the parameters of your story with the key value version in order to provide the necessary information to be displayed.

Configuration

Property Required Type of Value Description Example
major string Major version '1'
minor string Minor version '2'
patch string Patch version '3'
postfix string Postifx version extra data 'beta.1'
style object of keys string and values string Extra css properties to overwrite default style of the Version '{ 'color' : 'red', 'border-width': '2px' }'

Implementation

export const parameters = {
  version: {
    major: '1',
    minor: '2',
    patch: '3'
  }
}

Story Setup Example

Add the version parameter in the default Story configuration:

import React from 'react'

export default {
  title: 'Component Button',
  parameters: {
    version: {
      major: '4',
      minor: '2',
      patch: '0',
      postfix: 'rc3',
      style: {
        color: 'red',
        'font-weight': '900',
        'font-size': '24px'
      }
    }
  }
}
Join the community
5,858 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI