With Knobs 🎛

Usage

Import withKnobs as default from 'with-knobs' and use it to wrap an arbitrary object to get out of the box support for storybook knobs

Example

$3

ts

import { configure, addDecorator } from '@storybook/react';

import { withKnobs } from '@storybook/addon-knobs';



const requireContext = require.context('../src', true, /\.stories\.tsx$/);



function loadStories() {

  addDecorator(withKnobs);



  requireContext.keys().forEach(requireContext);

}



configure(loadStories, module);

$3

ts

import '@storybook/addon-knobs/register';

$3

tsx

import { storiesOf } from '@storybook/react';

import React from 'react';

import withKnobs from 'with-knobs';

import App from './App';

import { personalInformation } from './mocks/personalInformation';



storiesOf('App', module).add('Default', () => {

  return ;

});

$3

tsx

import React from 'react';

import './App.css';

import { PersonalInformation } from './mocks/personalInformation';



export type AppProps = PersonalInformation;



const App: React.FC = ({

  name,

  age,

  birthday,

  employed,

  hobbies,

  languages,

  favoriteColor,

}) => {

  return (

    

      

        Name:

        

      

      

        Favorite Color:

        

      

      

        Age:

        

      

      

        Employed:

        

      

      

        Hobbies:

        

      

      

        {Object.entries(languages).map(([language, level]) => (

          

            {language}:

            

          

        ))}

      

      

        Birthday:

        

      

    

  );

};



export default App;

$3

ts

export interface PersonalInformation {

  name: string;

  age: number;

  birthday: Date;

  employed: boolean;

  hobbies: string[];

  languages: { [language: string]: string };

  favoriteColor: string;

}



export const personalInformation: PersonalInformation = {

  name: 'John',

  age: 25,

  employed: true,

  favoriteColor: '#eee',

  hobbies: ['Running', 'Reading'],

  languages: {

    english: 'Mother Language',

    german: 'Proficient',

  },

  birthday: new Date('Jan 1 1994'),

};

Example

ts
import { configure, addDecorator } from '@storybook/react';
import { withKnobs } from '@storybook/addon-knobs';

const requireContext = require.context('../src', true, /\.stories\.tsx$/);

function loadStories() {
addDecorator(withKnobs);

requireContext.keys().forEach(requireContext);
}

configure(loadStories, module);

$3

ts
import '@storybook/addon-knobs/register';

$3

tsx
import { storiesOf } from '@storybook/react';
import React from 'react';
import withKnobs from 'with-knobs';
import App from './App';
import { personalInformation } from './mocks/personalInformation';

storiesOf('App', module).add('Default', () => {
return ;
});

$3

tsx
import React from 'react';
import './App.css';
import { PersonalInformation } from './mocks/personalInformation';

export type AppProps = PersonalInformation;

const App: React.FC = ({
name,
age,
birthday,
employed,
hobbies,
languages,
favoriteColor,
}) => {
return (

);
};

export default App;

$3

ts
export interface PersonalInformation {
name: string;
age: number;
birthday: Date;
employed: boolean;
hobbies: string[];
languages: { [language: string]: string };
favoriteColor: string;
}

export const personalInformation: PersonalInformation = {
name: 'John',
age: 25,
employed: true,
favoriteColor: '#eee',
hobbies: ['Running', 'Reading'],
languages: {
english: 'Mother Language',
german: 'Proficient',
},
birthday: new Date('Jan 1 1994'),
};