有趣的开源项目记录

参考网站：hellogithub.comopen in new window

和前端有关的开源项目推荐

postwomanopen in new window

一款基于Node.js的免费开源、便捷美观的API调试工具。看到这个名字大概立即就能想到postman了吧。

rc-bulletsopen in new window

基于CSS3 Animation试用React构建的弹幕组件，功能包含弹幕管理应有的功能。
演示地址open in new window

import React, { useEffect, useState } from 'react';
import BulletScreen, { StyledBullet } from 'rc-bullets';

const headUrl='https://zerosoul.github.io/rc-bullets/assets/img/heads/girl.jpg';
export default function Demo() {
  // 弹幕屏幕
  const [screen, setScreen] = useState(null);
  // 弹幕内容
  const [bullet, setBullet] = useState('');
  useEffect(() => {
    // 给页面中某个元素初始化弹幕屏幕，一般为一个大区块
    let s = new BulletScreen('.screen');
    // or
    // let s=new BulletScreen(document.querySelector('.screen));
    setScreen(s);
  }, []);
  const handleChange = ({ target: { value } }) => {
    setBullet(value);
  };

  const handleSend = () => {
    if (bullet) {
      screen.push(bullet);

      screen.push(
        <StyledBullet
          head={headUrl}
          msg={bullet}
        />
      );
      // or 还可以这样使用，效果等同使用 StyledBullet 组件
      screen.push({msg:bullet,head:headUrl,color:"#eee" bgColor:"rgba(2,2,2,.3)"})
    }
  };
  return (
    <main>
      <div className="screen" style={{ width: '100vw', height: '80vh' }}></div>
      <input value={bullet} onChange={handleChange} />
      <button onClick={handleSend}>发送</button>
    </main>
  );
}

react-loadingopen in new window

一款轻量、开箱即用并且支持按需加载的 React 动画组件库。示例代码：

import React from 'react';
import {DisappearedLoading} from 'react-loading';
const Container = () => <DisappearedLoading ></DisappearedLoading>;
export default Container;