how create npm package from react-components

react-component-package.md

How create npm package from React components

Structur

• src/
  • components/
    • COMPONENT_NAME/
      • COMPONENT_NAME.jsx // or js
      • index.js
  • stories
    • COMPONENT_NAME.stories.js
  • index.js
• package.json

Steps

• init npm npm init
  • set main file you should set main keyword
• install react(-dom) npm install --save-dev react react-dom
• use storybook npx sb init
• run storybook npm run storybook
• install babel react npm install --save-dev @babel/preset-react

src_components_my-component_index.js

// ./src/components/my-component/index.js

export * from './my-component.jsx';

src_components_my-component_my-component.jsx

// ./src/components/my-component/my-component.jsx

export const MyComponent = () => (
  <div>
    Hi, this is my component
  </div>
);

src_index.js

// ./src/index.js

export * from './components/my-component';

src_stories_my-component.stories.js

// ./src/stories/my-componentn.stories.js

import React from 'react';
import { storiesOf } from '@storybook/react';
import { MyComponent } from '../components/my-component';


const stories = storiesOf('App Test', module);

stories.add('App', () => {
  return( <MyComponent /> );
});