黑白梦

一些好用的 npm 前端开源库

收集一些好用的前端开源库,主要是 npm 包

62 篇文章

Tailwind CSS 基础概念、配置、常见问题和使用笔记

2024-02-25

Tailwind CSS 是当前最流行的样式框架,它有许多优势;对 IDE 支持友好,适合各种框架使用;掌握基础用法后,整体记忆成本不大。

zustand 简易好用的 React 状态管理库

2023-12-15

没有样板代码,没有额外学习成本,简单清晰,上手即用。

使用 pro-components 的 DragSortTable 拖动排序表格

2023-12-18

@ant-design/pro-components 以前需要引入 react-sortable-hoc 及大量代码,而现在已有可拖拽表格组件 DragSortTable,可直接使用。

DOMPurify 更好用的前端 XSS 字符串清理库

2023-07-13

DOMPurify 用于进行 HTML 文本的过滤,它会尽可能保留更多无害的属性,尽可能保持原有效果。

copy-to-clipboard 文本复制

2023-05-16

使用方法很简单的文本复制插件,也有不错的 react 包装器。

vditor 更好用的 markdown 编辑器组件

2023-07-06

这个编辑器组件功能很多,基本上能想到的都包含了,编辑体验良好,移动设备使用体验也不错。记录一些使用笔记。

代码编辑器库 CodeMirror 6 使用笔记

2023-05-06

CodeMirror 6 对 ts 、ES6 模块引入等的支持都很好,各个语言、插件等都单独拆成了包,可按需引入,也有一个好用的 react 包装组件。

前端 id 生成:uuid 与 nanoid

2023-04-12

有时需要前端 id 生成的场景,这里比较使用常用的 id 生成库 uuid 与 nanoid ,以及探讨 id 冲突问题的解决方法。

react-image-magnify 缩略图鼠标移入放大插件

2023-04-09

一个用于触摸和鼠标的响应式React图像缩放组件,专为购物网站产品细节设计。

sortablejs 拖拽排序

2022-05-11

SortableJS 对列表通过拖放 (drag-and-drop) 进行拖拽排序。它还提供了 Vue.Draggable 等比较成熟的包装组件。

react-rnd 对元素拖拽和调整大小

2023-03-21

创建可拖拽、调整大小的元素。rnd 的意思是:resizable and draggable。

react-split-pane 可调整大小的拆分窗格

2023-03-12

分割窗格 React 组件,可以嵌套或垂直或水平分割

react-content-loader 创建骨架屏占位符加载效果

2023-03-06

开箱即用,可定制,轻量级。

通过 markdown-it 解析 markdown 文本

2022-11-25

markdown-it 是流行的 markdown 解析库,插件丰富。

katex 渲染数学公式

2022-11-22

katex 库支持渲染 LaTeX 数学公式,可结合 markdown 使用。

swiper 滑动轮播库

2022-11-14

最流行的滑动轮播库之一,支持竖向、横向滑动,支持PC和移动端。

html2canvas 页面转换为 canvas ,并转为图片或 PDF 下载

2022-09-19

html2canvas 可直接在用户浏览器上将网页或部分网页生成"屏幕截图",屏幕截图基于 DOM。

react-indiana-drag-scroll 移动端元素拖动滚动组件

2022-08-27

该组件的介绍很简洁:实现拖动滚动。用于在移动端替换掉 PC 的滚动条,通过手势滑动形式进行滚动。

React Hooks 合集 ahooks 和 react-use

2022-08-04

ahooks 和 react-use 是两个 React Hooks 合集,拥有丰富的 Hooks 可直接使用。

why did you render 排查 react 渲染情况

2022-07-27

用于在开发环境跟踪 react 组件的渲染情况

react-intl 国际化组件

2022-06-16

较为成熟,支持 hooks 使用。

react-beautiful-dnd 拖拽排序库

2022-05-13

这个拖拽库的拖拽动画较为顺滑,且拥有相对更简易的 api。

@loadable/component 实现 react 动态加载

2023-02-23

React 代码分割库,可实现路由动态懒加载;替代 React.lazy,因为可以适配 vite。

videojs 视频播放器

2022-05-22

世界上最流行的开源 HTML5 播放器框架之一

ffmpeg.wasm 浏览器中的 ffmpeg

2022-07-06

把 ffmpeg 跑在浏览器里

在 React 和 umi.js 中使用 Handsontable 电子表格组件

2019-08-31

Handsontable 是一个 js 表格组件,提供了数据绑定、验证、排序、上下文菜单等功能,最后一个开源免费的版本是 6.2.2 。

iframe-resizer 自动解析 iframe 高度

2022-04-30

使 iframe 的高度和宽度的自动调整大小

tinymce 富文本编辑器

2022-03-20

tinymce 是最流行的富文本编辑器之一

tui.editor 所见即所得的 Markdown 编辑器

2022-02-03

所见即所得的 Markdown 编辑器,支持 GFM 标准、图表和 UML 扩展。

tui.image-editor 图片编辑器

2022-01-15

强大的图片编辑器,可直接调用,或者通过 api 调用编辑器的能力

quill 富文本编辑器

2022-01-04

Quill 是一种现代的 WYSIWYG 编辑器,具备兼容性和可扩展性。

jsoneditor 专门的 JSON 编辑器

2021-06-17

可用于查看、编辑、格式化与校验 JSON 的编辑器,基于 codemirror

signature_pad 电子签名板

2021-11-18

signature_pad 是用于绘制平滑签名的JavaScript库,是基于HTML5 canvas ,适用于 PC 和移动端。

qrcode 生成二维码

2021-10-13

常用的二维码生成库

qrcode-parser 二维码解析

2021-10-03

一个纯JavaScript的二维码阅读库,接受File对象,图片url,base64。

使用 babel 7 后,解决老旧 npm 库对旧版 babel-core 的依赖问题

2021-08-23

目前 babel 7 的使用已经很普遍了,新创建的项目,不应该再用 6 的版本。但有一些库,还对 babel-core 有着依赖。并且,这些库也不能再升级。这时就可以安装 babel-core 的 7.0.0-bridge.0 版本,来解决这个问题。

jszip 浏览器二进制压缩、解压库

2021-07-24

解压上传的 zip 文件,可以解压并读取文件的名字、内容

js 滤镜库

2021-07-01

对比使用滤镜库 Philter 和 camanjs

ua-parser-js 解析 user-agent 信息

2021-05-20

user-agent 的内容存在较多混淆信息,判断起来比较麻烦。找一个可解析详细信息的库,方便且更准确。

react-native-elements 跨平台 UI 组件

2021-05-07

可同时用于 react-native 和 react-native-web 中

js-cookie 前端处理 cookie

2021-04-18

在浏览器中通过 JavaScript 处理 cookies

js-xss 白名单过滤工具库

2021-02-05

传入 html 文本进行过滤,返回过滤后的文本。

ts-node-dev 运行 ts 项目

2021-01-10

可直接执行 ts 文件,不用使用 tsc 监听编译,可自动重启

cross-env 指定环境变量信息

2020-11-24

在命令中指定环境变量信息,可用于指定不同的项目环境。

scriptjs 异步引入 js 文件

2020-10-15

加载一些未提供 npm 引入的库时,可以把它放到了 static 目录,通过 scriptjs 引入。

qs 对 url 参数进行 URL encoded

2020-09-18

get 参数如果需要写得比较复杂,需要通过 qs 来进行编码。

pinyin 汉字转拼音

2020-07-13

转换中文字符为拼音。可以用于汉字注音、排序、检索。

localForage 前端储存库

2020-06-22

localForage 通过简单类似 localStorage API 进行异步存储。优先使用 IndexedDB 进行存储,可以存储较大数据,也能存储多种类型的数据,而不仅仅是字符串。

fonts.css 跨平台 CSS 中文字体解决方案

2020-05-17

提供了黑体、宋体、楷体等常用的字体代码

fetch-jsonp 跨域 jsonp 请求

2020-04-09

类似 window.fetch 的 JSONP 请求库

tesseract.js 文字 OCR 识别库

2020-03-25

适用于 100 多种语言的纯 Javascript OCR,无需联网即可使用。

openbase 网站,对比各种同类组件

2023-04-06

将开源软件包进行比较,让我们可以多方面对比,更容易选择正确的开源包。

常用的免费图片、插画、图标网站

2022-03-09

博客、公众号等自媒体配图,图片、插画、图标等,最好使用无版权图片。

前台代码高亮方案 highlight.js 应用,支持网页与微信小程序

2020-08-16

常用的富文本编辑器,具有代码块功能,但没有代码高亮,这里引入 highlight.js 实现高亮,并尝试支持普通网页、单页应用及微信小程序。

通过 marked 渲染 markdown 为富文本格式,并设置样式、代码高亮

2021-08-16

最近,将博客的文章编辑器从富文本改为了 markdown 编辑器,为了最终渲染的效果,需完成富文本的转化。

Node.js 图像处理库 Sharp

2019-11-25

Sharp 是高性能的图像处理库,使用了libvips,速度极快,它提调整尺寸、剪裁、旋转、转换格式等图像处理功能,下载量在同类仓库中比较高。

cheerio 类 jq 语法进行访问与操作 html 文本

2021-09-19

对于 html 文本,使用 cheerio 进行数据提取,通过 jq 的语法就可以进行数据的操作。

http-server 简单静态服务器

2019-06-21

生成简单静态服务器,可用于本地访问、局域网访问相关资源。

Node SerialPort 控制串行接口设备

2019-10-26

Node.js 库,控制串行接口设备,可用于 electron 中

viewerjs 易用的图片查看组件

2023-04-08

博客图片需要进行放大、切换等效果,引入 viewerjs 这种第三方组件,可以快速获得丰富、完善的图片播放功能。

在 Node.js 中通过 @ffmpeg-installer/ffmpeg 一键安装 ffmpeg 依赖

2022-06-24

配置 ffmpeg 通常需要做很多设置工作,但通过该 npm 包我们可以直接在 Node.js 中引用 ffmpeg,它会被自动安装。

Node.js 中的同步的 http 请求库 sync-request

2022-07-13

比如在 webpack 配置文件中,如需请求数据,异步的模式下往往不好写。sync-request 可以写出同步的代码,让 node.js 暂停直到请求完毕。