react npm插件推荐

2019独角兽企业重金招聘Python工程师标准>>>

react npm插件推荐

本文依据博主在平时应用中运用的react插件做简单介绍，如果有更好的技术交流可邮箱联系：regan_jeff@163.com。

音乐播放器（aplayer）

正如它的介绍 "*** Wow, such a beautiful HTML5 music player***”，如此美丽的播放器，aplayer不仅仅美丽同时也兼具了功能等，不仅简单而且易用更是更注重生态，包含了vue h5 php..等等可谓良心之作。此处只介绍react版本的Aplayer,话不多说先上截图。

1. 安装：

使用 npm:

    npm install react-aplayer --save

使用 Yarn:

    yarn add react-aplayer

2. 实例：

import React from 'react';
import ReactAplayer from 'react-aplayer';

export default class App extends React.Component {
  // event binding example
  onPlay = () => {
    console.log('on play');
  };

  onPause = () => {
    console.log('on pause');
  };

  // example of access aplayer instance
  onInit = ap => {
    this.ap = ap;
  };

  render() {
    const props = {
      theme: '#F57F17',
      lrcType: 3,
      audio: [
        {
          name: '光るなら',
          artist: 'Goose house',
          url: 'https://moeplayer.b0.upaiyun.com/aplayer/hikarunara.mp3',
          cover: 'https://moeplayer.b0.upaiyun.com/aplayer/hikarunara.jpg',
          lrc: 'https://moeplayer.b0.upaiyun.com/aplayer/hikarunara.lrc',
          theme: '#ebd0c2'
        }
      ]
    };

    return (
      <div>
        <ReactAplayer
          {...props}
          onInit={this.onInit}
          onPlay={this.onPlay}
          onPause={this.onPause}
        />
        {/* example of access aplayer instance API */}
        <button onClick={() => this.ap.toggle()}>toggle</button>
      <div>
    );
  }
}

▶️ 视频播放器(dpalyer)

没错dplayer是aplayer的兄弟版，只不过一个是音乐一个是视频，在此推荐它也是因为其简约简单的设计同时也具备强大的功能，正如它的介绍：“*** Wow, such a lovely HTML5 danmaku video player***”。

dplayer不仅仅是一个简单的视频播放器，同时也是强大的弹幕视频播放器，不仅仅支持弹幕还对自定义字幕不同清晰度的切换都增加了支持，同时兼容网上现有的绝大部分视频格式，简单实用大赞。至于生态dplayer同样提供了绝大多数的版本支持，此处只介绍react版本。

1. 安装：

    npm install react-dplayer -D
   

2. 实例：

import Dplayer from "react-dplayer";

class Example extends Component {
    render() {
        return (
            <DPlayer video={{url: 'http://static.smartisanos.cn/common/video/t1-ui.mp4'}}/>
        )
    }
}

MarkDwon推荐（react-markdown）

和大多数的markdown一样，不过在用了大多数的版本后，还是推荐这个，不为别的因为其简单易用满足大多数的markdwon解析需求。

1. 安装：

    npm install --save react-markdown
   

2. 实例：

const React = require('react')
const ReactDOM = require('react-dom')
const ReactMarkdown = require('react-markdown')

const input = '# This is a header\n\nAnd this is a paragraph'

ReactDOM.render(
  <ReactMarkdown source={input} />,
  document.getElementById('container')
)

markdown编辑器推荐：Mditor

在线代码编辑器(CodeMirror)

CodeMirror是一款在线的支持语法高亮的代码编辑器,同时支持数十种代码高亮展示，各种自定义主题展示。但是原生的CodeMirror对react支持比较麻烦，在此推荐一个基于CodeMirror比较友好的封装——react-cmirror。

1. 安装

    npm install --save react-cmirror
   

2. 实例：

import ReactCodeMirror from 'react-  cmirror';
import 'codemirror/mode/markdown/markdown';
import 'codemirror/theme/monokai.css';

<ReactCodeMirror options={{mode: 'markdown', theme: 'monokai'}} />

react-cmirror是基于CodeMirror再次封装的，因此CodeMirror文档中事件主题配置等等全部支持，因此在做比较复杂的功能时，完全可以参考CodeMirror官网配置。

Json数据在线编辑（react-json-view）

react-json-view不仅仅是一个json数据在线展示的格式化工具，同时也支持在线编辑功能，事件支持很简单可轻松的实现数据在线编辑等功能。同时优美的外观也是它的一个亮点，支持多种主题风格可自由适配。如果有json数据方面的应用它是个不错的选择。

1. 安装： npm install --save react-json-view
2. 实例：

// import the react-json-view component
import ReactJson from 'react-json-view'

// use the component in your app!
<ReactJson src={my_json_object} />

简易动画终结者（react-magic）

也许在开发中想要实现一些炫酷的动画效果，对于复杂的动画组件如果很头疼的话，不妨试试这个。简单实用又有种怦然心动的感觉，动起来吧。

1. 安装：

    npm install --save react-magic    
   

2. 实例:

import React, { Component, PropTypes }   from 'react';
import { StyleSheet, css } from 'aphrodite';

import { swap } from 'react-magic';

const styles = StyleSheet.create({
    magic: {
        animationName: swap,
        animationDuration: '1s'
    }
});

class App extends Component {
    render() {
        return (
            <div>
                <div className={css(styles.magic)}>
                    <h2>react-magic</h2>
                </div>
            </div>
        );
    }
}

export default App;   

图表（Echarts）

图表在实际开发应用中不可少，如何应用echarts绝对能满足你的大部分需求。

此处推荐react版本的echarts ——echarts-for-react。

1. 安装：

    npm install --save echarts-for-react
   
    npm install --save echarts
   

2. 实例：

import React from 'react';
import ReactEcharts from 'echarts-for-react';  // or var ReactEcharts = require('echarts-for-react');

<ReactEcharts
  option={this.getOption()}
  notMerge={true}
  lazyUpdate={true}
  theme={"theme_name"}
  onChartReady={this.onChartReadyCallback}
  onEvents={EventsDict}
  opts={} />

富文本（Braft Editor）

简单易用让人眼前一亮的富文本编辑器。

1. 安装

    # 使用yarn安装
    yarn add braft-editor
   
    # 使用npm安装
    npm install braft-editor --save
   

2. 实例：

import React from 'react'
import ReactDOM from 'react-dom'

// 引入编辑器以及编辑器样式
import BraftEditor from 'braft-editor'
import 'braft-editor/dist/braft.css'

class Demo extends React.Component {

  render () {

    const editorProps = {
      height: 500,
      contentFormat: 'html',
      initialContent: '<p>Hello World!</p>',
      onChange: this.handleChange,
      onRawChange: this.handleRawChange
    }

    return (
      <div className="demo">
        <BraftEditor {...editorProps}/>
      </div>
    )

  }

  handleChange = (content) => {
    console.log(content)
  }

  handleRawChange = (rawContent) => {
    console.log(rawContent)
  }

}

最后 React UI框架推荐

• 飞冰
• rsuite
• ant design
• kui
• Taro

转载于:https://my.oschina.net/jeffregan/blog/1927866