October 22, 2019
react-spring 是一个基于弹簧物理学的动画库。
最基本的用法：
1 2 3 4 5 6 import {useSpring, animated} from 'react-spring' function App() { const props = useSpring({opacity: 1, from: {opacity: 0}}) return <animated.div style={props}>I will fade in</animated.div> } 其中的useSpring可以创造一个js动画，这种动画默认不需要设置持续时间，他通过一些弹簧参数来控制动画的表现。可以通过config设置这些参数，像这样：
1 useSpring({ config: { duration: 250 }, ... }) 参数有哪些可以看Common api这节文档。
1 useSpring({opacity: 1, from: {opacity: 0}}) from为动画开始的值，1为动画最后的值。
1 useSpring({opacity: 1, to: {opacity: 0}}) 1为动画开始的值，to为动画最后的值。
如果useSpring中变化的值可以直接使用，比如颜色、数字，则可以直接使用
1 <animated.div style={props}>I will fade in</animated.div> 或这样
1 <animated.span>{props.number}</animated.span> 如果useSpring中变化的值需要组合成字符串，比如transform，则需要使用插值函数(interpolate)来实现
...
August 28, 2019
文档
yarn add react-with-gesture
import { useGesture, withGesture, Gesture } from 'react-with-gesture'
August 28, 2019
官网
使用 # yarn add react-rangeslider --save
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 import Slider from 'react-rangeslider' import 'react-rangeslider/lib/index.css' <Slider min={0} max={100} value={value} onChangeStart={this.handleChangeStart} onChange={this.handleChange} onChangeComplete={this.handleChangeComplete} /> <Slider min={0} max={10} value={reverseValue} orientation='horizontal' onChange={this.handleChangeReverse} />
August 22, 2019
React Popup 是一个弹窗组件的库。
安装 # yarn add reactjs-popup npm install reactjs-popup 基本用法 # contentStyle：设置内容区的样式 overlayStyle：设置遮罩的样式 占位弹窗1 # 1 2 3 4 5 6 7 8 import React from "react"; import Popup from "reactjs-popup"; const PopupExample = () => ( <Popup trigger={<button> Trigger</button>} position="right center"> <div>Popup content here !!</div> </Popup> ); 占位弹窗2 # 1 2 3 4 5 6 7 8 9 10 11 12 const PopupExample = () => ( <Popup trigger={<button>Trigger</button>} position="top left"> {close => ( <div> Content here <a className="close" onClick={close}> × </a> </div> )} </Popup> ); 受控Modal # 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 const Modal = () => ( <div> <button className="button" onClick={this.
...