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: 9 months 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 8 years ago)
- Default Branch: master
- Last Pushed: 2018-06-15T09:01:29.000Z (over 7 years ago)
- Last Synced: 2025-02-25T12:02:15.019Z (10 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)
[](https://www.npmjs.com/package/element-react-ui-components)
[](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