# element-react

> Element UI for React

Latest version **1.4.34** (published 2019-05-16) · MIT license · 0 weekly downloads

## Install

```sh
npm install element-react
pnpm add element-react
yarn add element-react
bun add element-react
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.4.34 |
| Published | 2019-05-16 |
| First published | 2017-04-20 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 8 |
| Unpacked size | 2.7 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2830 |
| Author | ELEME Inc |
| Maintainers | e1emeb0t, rlog, samleong019 |
| Keywords | Element, UI, React |

## Links

- npm: https://www.npmjs.com/package/element-react
- Repository: https://github.com/ElemeFE/element-react
- Issues: https://github.com/ElemeFE/element-react/issues
- npm.io page: https://npm.io/package/element-react

## Dependencies (8)

- [raf](https://npm.io/package/raf.md) ^3.4.1
- [popper.js](https://npm.io/package/popper.js.md) ^1.14.7
- [classnames](https://npm.io/package/classnames.md) ^2.2.6
- [prop-types](https://npm.io/package/prop-types.md) ^15.6.2
- [async-validator](https://npm.io/package/async-validator.md) ^1.10.1
- [throttle-debounce](https://npm.io/package/throttle-debounce.md) ^2.1.0
- [react-click-outside](https://npm.io/package/react-click-outside.md) ^3.0.1
- [react-transition-group](https://npm.io/package/react-transition-group.md) ^2.5.3

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.4.34 (latest) — 2019-05-16
- 1.4.33 — 2019-03-01
- 1.4.32 — 2019-01-31
- 1.4.31 — 2019-01-30
- 1.4.30 — 2019-01-30
- 1.4.27 — 2019-01-29
- 1.4.26 — 2018-12-20
- 1.4.25 — 2018-12-13
- 1.4.24 — 2018-10-26
- 1.4.23 — 2018-10-26
- 1.4.21 — 2018-08-28
- 1.4.20 — 2018-06-25
- 1.4.19 — 2018-05-14
- 1.4.18 — 2018-05-14
- 1.4.17 — 2018-05-14
- … 53 more at https://npm.io/package/element-react/versions

## README

# Element React

[![](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.svg)](https://www.npmjs.com/package/element-react)
[![](https://img.shields.io/npm/dm/element-react.svg)](https://www.npmjs.com/package/element-react)

[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 --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';
```

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/next';
```

### Config

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

```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

---
_Source: https://npm.io/package/element-react · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._