my-react-component-library v0.0.2

My react component library

I am working these days on this project to get it production ready. Currently there's still a lot to clean up and test. This module makes it possible to manage your react components as a monorepo. In addition to components you are able to distribute a styleguide. You can define different versions of your component styles and manage the integration easily in your webpack.config.js.

This project comes with a live JSX editor as you probably know from the react homepage. This makes it easy also for non-developer to get a glimpse of components and its usage.

Features

• Monorepo for react components
• CSS styleguide
• Live demo for components

Dependencies

• The versioning and publishing workflow is baed on Lerna.

Usage

Install the styleguide in your app.

npm i my-react-component-library -S -E

// webpack.config.js
resolve: {
  modules: [
    path.resolve(__dirname, 'node_modules')
  ],
  alias: {
    'styleguide-v1': path.resolve(__dirname, 'node_modules', 'my-react-component-library')
  }
}
...
module: {
  loaders: [
    {
      test: /\.(jsx|js)?$/,
      // include: path.resolve(__dirname, 'node_modules', 'styleguide-v1'),
      loader: 'babel',
      query: {plugins: []}
    },
    {
      test: /\.less$/,
      loader: ExtractTextPlugin.extract('css-loader?minimize&-autoprefixer!less-loader'),
      // include: path.resolve(__dirname, 'node_modules', 'styleguide-v1')
    }
  ]
}

Loading styles

You can either load the complete styleguide includind all components as css

@import "~styleguide-v1/themes/v1/css/theme-v1.min.css";

Or you load the styles for each component individually.

@import "~styleguide-v1/themes/v1/css/components/pagination.css";

Loading react components

Import components the usual way.

import Pagination from 'styleguide-v1/components/Pagination';

Commands

# Start demo
npm start

# Run unit tests
npm test

# Run unit tests with file watcher
npm run test:watch

# Create a new component
npm run create:component ComponentName

...