https://github.com/amittksharma/element-react-ui-components

https://github.com/amittksharma/element-react-ui-components

css element-react-ui-components element-ui element-ui-components react react-component react-components react-ui-components typescript ui-components ui-design

Last synced: 22 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/amittksharma/element-react-ui-components
• Owner: amittkSharma
• License: mit
• Created: 2018-02-23T08:34:44.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2018-06-15T09:01:29.000Z (over 6 years ago)
• Last Synced: 2024-09-19T03:36:34.639Z (3 months ago)
• Topics: css, element-react-ui-components, element-ui, element-ui-components, react, react-component, react-components, react-ui-components, typescript, ui-components, ui-design
• Language: JavaScript
• Homepage: https://amittksharma.github.io/element-react-ui-components/#/en-US/quick-start
• Size: 1.13 MB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Element React UI Components

[![](https://travis-ci.org/eleme/element-react.svg?branch=master)](https://travis-ci.org/eleme/element-react)

[![](https://img.shields.io/npm/v/element-react-ui-components.svg)](https://www.npmjs.com/package/element-react-ui-components)

[![](https://img.shields.io/npm/dm/element-react-ui-components.svg)](https://www.npmjs.com/package/element-react-ui-components)

[Element](https://github.com/ElemeFE/element) was initially written in [Vue](https://vuejs.org/), which has many elegant UI components, but we also love [React](https://facebook.github.io/react/), so we forked it for the React community.

## Getting Started

### Install

```bash

npm install element-react-ui-components --save

```

Before the building, you need a style theme, here we recommend you to pick up `element-theme-default`.

```bash

npm install element-theme-default --save

```

### Usage

We are die hard fans of ECMAScript 6, so we recommend you writing code in modern javascript.

```js

import { Button } from 'element-react-ui-components';

```

Also we provide an advanced way to [tree shaking](https://blog.engineyard.com/2016/tree-shaking) the code with [Rollup.js](http://rollupjs.org/) and [Webpack 2](https://webpack.github.io/)

```js

import { Button } from 'element-react-ui-components/next';

```

### Config

With webpack, you need additional loaders to build with `element-react-ui-components`.

```js

const webpack = require('webpack');

module.exports = {

  entry: {

    src: 'path/to/src'

  },

  output: {

    path: 'path/to/output',

    publicPath: '/public',

    chunkFilename: '[chunkhash:12].js',

    filename: '[chunkhash:12].js'

  },

  plugins: [

    new webpack.DefinePlugin({ 'process.env.NODE_ENV': JSON.stringify('production') }),

    new webpack.optimize.UglifyJsPlugin({

      output: {

        comments: false

      }

    })

  ],

  resolve: {

    extensions: ['.js', '.jsx']

  },

  module: {

    loaders: [

      {

        test: /\.jsx?$/,

        loader: 'babel-loader',

        include: ['path/to/src']

      },

      {

        test: /\.css$/,

        loaders: ['style-loader', 'css-loader']

      },

      {

        test: /\.(ttf|eot|svg|woff|woff2)(\?.+)?$/,

        loader: 'file-loader?name=[hash:12].[ext]'

      }

    ]

  }

}

```

## Contributing

Please make sure to read the [Contributing Guide](https://github.com/eleme/element-react/blob/master/CONTRIBUTING.md) before making a pull request.

## Acknowledgments

* [@doxiaodong](https://github.com/doxiaodong) for adding typescript ambient declarations.

* [@cuining](https://github.com/cuining) for building the live code editor.

## Credits

* [Element](https://github.com/ElemeFE/element) Desktop UI elements for Vue.js 2.0.

## License

MIT