Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including @rxh/element-react with all npm packages installed. Try it out:

require("react/package.json"); // react is a peer dependency. require("react-dom/package.json"); // react-dom is a peer dependency. var elementReact = require("@rxh/element-react")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

@rxh/element-react v1.4.34-3

Element UI for React

Element React

注意,这是一份element-react官方仓库的副本,旨在定制优化某些特性。如有可能,会将这部分代码提交申请合并到官方仓库。

Element was initially written in Vue, which has many elegant UI components, but we also love React, so we forked it for the React community.

Getting Started

Install

npm install element-react --save

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

npm install element-theme-default --save

Usage

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

import { Button } from 'element-react';

Also we provide an advanced way to tree shaking the code with Rollup.js and Webpack 2

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

Config

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

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 before making a pull request.

Acknowledgments

  • @doxiaodong for adding typescript ambient declarations.
  • @cuining for building the live code editor.

Credits

  • Element Desktop UI elements for Vue.js 2.0.

License

MIT

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free