How do I use { text } in Storybook?

Question

I am trying to use Storybooks `import { text } from '@storybook/addon-knobs', to allow my users to enter there own text in a particular story.

I've tried going through the docs, and actually they aren't very helpful. Would someone be able to show me a basic example of a Storybook Story that uses text so users can input their own text please?

I am using React 16 by the way

I also tried using Storybook Docs and used the following example...

import React from 'react';
import { text } from '@storybook/addon-knobs';

// Knobs as dynamic variables.
export const asDynamicVariables = () => {
  const name = text('Name', 'James');
  const content = `I am ${name}.`;

  return <div>{content}</div>;
};

But didn't get what I was expecting, which was an area where users could input there own text...

I'm also adding to my pain by trying to do this in MDX format :/

What documentation did you read? – morganney Feb 21 '23 at 00:46 — morganney, Feb 21 '23 at 00:46

score 2 · Accepted Answer · answered Feb 21 '23 at 09:27

@storybook/addon-knobs is now deprecated in favor of @storybook/addon-controls.

Documentation for using controls. Example with MDX:

<!-- Button.stories.mdx -->

import { Meta, Story } from '@storybook/addon-docs';

import { Button } from './Button';

<Meta title="Button" component={Button} />

export const Template = (args) => ({
   // Your template goes here
});

<Story 
  name="Primary"
  args={{ 
    variant: 'primary',
  }}>
  {Template.bind({})}
</Story>

Check the complete control types list here. You'd be using the same text option as in your code

How do I use { text } in Storybook?

1 Answers1