CODEWITHSUNDEEP
reactjsstorybook
Jin
Jin

Reputation: 1439

How can export components to storybook

I am practicing with the story-book and this is my code for that src/component/Table.js

import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import Table from './components/Table'

class Table extends Component {
  render() {
    return (
      <table class="table table-hover">
        <thead>
          <tr>
            <th>ID</th>
            <th>NAME</th>
            <th>PRICE</th>
            <th>OPTION</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
          </tr>
        </tbody>
      </table>
    );
  }
}

export default Table;

And this is my storybook code src/stories/Button.story.js

import React from 'react';
import { action } from '@storybook/addon-actions';
import { Button } from '@storybook/react/demo';
import 'bootstrap/dist/css/bootstrap.css';
import {Table} from './components/Table';

export default {
  title: 'Button',
  component: Button,
};

export default {Table};

I want to export the Table from the components folder through the storybook but I don't know how to export it, can someone help me? Please, many thank

When I export like that it show me an error : Only one default export allowed per module.

Upvotes: 0

Views: 2299

Answers (1)

Hovakimyan
Hovakimyan

Reputation: 558

I think the issue can come because you have two default exports in your code.

Can you try something like this

import React from 'react';
import {Table} from './components/Table';

export default {
  component: Table,
  title: 'Table',
};

export const sample = () => <Table />;

Upvotes: 1

Related Questions