一些我用到的前端库

整理一下常用的库

现代化的文本编辑器

官网 该编辑器使用html5的contenteditable属性实现

1. 支持多人编辑
2. 支持本地缓存和网络同步
3. 支持图文，表情混排

支持WebGPU的3D库

官网 支持流体渲染

处理金额 Dinero.js

安装

npm install dinero.js@alpha

使用

import { USD } from '@dinero.js/currencies';
import { dinero, add } from 'dinero.js';

const d1 = dinero({ amount: 500, currency: USD });
const d2 = dinero({ amount: 800, currency: USD });

add(d1, d2);

动画以及视差滚动页面

能做的不止这一点，官网有很多示例 安装

npm i @react-spring/web

使用

import { useSpring, animated } from "@react-spring/web";
export default function MyComponent() {
  const springs = useSpring({
    from: { x: 0 },
    to: { x: 100 },
  });
  return (
    <animated.div
      style={{
        width: 80,
        height: 80,
        background: "#ff6d6d",
        borderRadius: 8,
        ...springs,
      }}
    />
  );
}

处理时间 day.js

安装

npm install dayjs --save

使用

//国际化
import 'dayjs/locale/es
dayjs.locale('es')

dayjs('2018-08-08') // parse

dayjs().set('month', 3).month() // get & set

dayjs().add(1, 'year') // manipulate

dayjs().isBefore(dayjs()) // query