npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

roku-ui

v0.15.2

Published

已在这里消耗的时间:

Downloads

134

Readme

Roku UI

已在这里消耗的时间:

CodeTime badge

这是一个 React 组件库。基于 Uno CSSVite 等项目,很潮。

Warning

这是一个开发中的 React 组件库。所有 API 可能会有非常大的变化。

相对于现有的组件库,Ruku UI 试图实现以下目标:

  • 内置丰富而不造作的动画。
  • 内置开箱即用的高级组件。

为什么要做一个新的的组件库?

已经有许多优秀的组件库。他们都有不同的设计逻辑和依赖。而这些是我们所不能自由选择的。比如大量的组件库使用了 CSS in JS 的技术——而这一技术是否值得引入仍然存在争议。因为这存在潜在的性能问题,同时也会增加开发者的学习成本。

有一些组件库支持很多 Fancy 的写法和功能,能够深入进行定制,但是打包体积变得巨大,即使开启了 Tree Shaking,也不能显著减少包大小。

另一方面,许多组件库没有提供业务所需的独特组件,或者没有提供令人满意的动画和效果。这些组件库虽然支持定制,但是如果要大规模地改变样式,需要深入理解他们的代码是如何控制样式的,否则很容易造成冲突。

但实践中,从已有的组件上进行修改甚至不如自己从头做一套来得快。于是我搓了一堆自定义组件分散在自己维护的各个项目里。随着我技术的提升,我发现个人维护一个组件库项目也不是不可能的事情。

因此,为了能够复用这些自定义的动画效果和组件,我启动了这个项目。我希望至少在我的个人项目中,我不需要再魔改他们。它的可定制性肯定不够强,但我希望默认的组件配置足以覆盖我个人的全部需求。

也希望它能够覆盖你的需求。

使用案例

只有很少的一部分网站使用了 Roku UI,全部都是我做的。不过那又如何,至少只要我还在做网站,这个项目就会一直更新下去。

由 Roku UI 驱动的网站有:

如果你竟然真的敢于将这个项目用在了自己的网站中,那么非常欢迎向我提交 Issue,我会把你的网站追加在这里。

安装

可以朴实无华地使用 pnpmnpmyarn 安装。开发时使用的是 pnpm,因此我更推荐你使用它。

pnpm install roku-ui