推一波自己的 React 组件库

[xiejay97]

感觉写的挺好的，就是缺 API 文档和测试，希望有人一起共建。

https://github.com/laser-ui/laser-ui

https://laser-ui.github.io/

[ltaoo1o]

能完整实现一套组件库很厉害了，有什么比较亮眼的功能点吗

[xiejay97]

@ltaoo1o 样式，其实用组件库最麻烦的就是样式问题，我设计了一套 JS 样式封装，可以整个替换或者针对元素单独节点设置，包括修改或者覆盖 class 和 style ，其它不能说亮眼，只能说都有：
动态主题，使用 css 变量。
ARIA 支持。
国际化支持。
SSR 支持。
移动设备支持。

因为完全没什么第三方依赖，体积打包特别小 100KB

[SayHelloHi]

学习了 感谢分享～

[xiejay97]

实在写文档有心无力

[ltaoo1o]

@xiejay97 #2 我用组件库也是经常会遇到要覆盖样式，但是非常困难的问题。可以在某个页面强调一下这个功能点，给一个具体的业务场景，肯定能吸引到有需求的人来用。

[putyy]

瞟了一眼 不错 先赞！

[passion336699]

https://github.com/laser-ui/laser-ui/blob/main/libs/components/src/tabs/Tabs.tsx

OP 可以介绍下 refreshTabs 确保选项卡正确处理溢出，并且将因溢出而不可见的选项卡放到下拉列表的思路吗？

最近有需求要实现一个，取取经

[xiejay97]

@passion336699 考虑简单场景，一堆选项卡（ tab ）放在可滚动容器（ container ）中，首先检查 container 的 scrollWidth 和 clientWidth 判断是否选项卡有溢出滚动，如果有，方案 1：遍历 tab ，通过`getBoundingClientRect`获取 left ，对比 left 是否超过 container 的 left ；方案 2：遍历 tab ，通过累加 offsetWidth ，对比宽度是否超过 container 的 clientWidth

[xiejay97]

@xiejay97 方案 2 不好，因为 css 导致的位置变化是很难计算的（如 margin 、transform ）

[blur1119]

最近正好想做组件库相关的事情。还有组件功能可以编写的吗，想参与进来

[xiejay97]

@blur1119 有的，我 Dropdown 那块就一直想加虚拟滚动支持，懒没写，而且有其它原子类组件，合适的话也可以开发，留 issue 我拉你

[eluotao]

已 Start,就佩服你们这种写 ui 的

[shunia]

文档的话，可以多写点注释，先自动生成一波，有问题再慢慢调整。

一般我看到这种 readme 就归结为低质量自 high 产物直接略过了，高质量的 readme 真的是必不可少的，既然代码都开源了，别省这个功夫。

[xiejay97]

@shunia 我就是因为想完善文档才发贴不是，所以个人开发者想做这类项目真的挺无奈的，因为很难有社区陪你一起成长，有多少喜欢并且能够折腾技术的人，生活很难的啦。不过我很庆幸这些东西全在公司落地项目，我个人也保持着一个技术人的热爱。

[dufu1991]

@shunia https://github.com/any-tdf/stdf 这个的 README 能不能过关，提提意见。

[guhuisec]

不错

[SHF]

不错，支持 react 19 吗？

[xiejay97]

@SHF 支持而且超前，可以看看这个迁移计划 https://github.com/laser-ui/laser-ui/issues/1