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

react-uni-comps

v1.8.9

Published

React hooks based components for desktop and mobile

Downloads

252

Readme

在线文档 (online docs)

安装 (Installation)

npm install react-uni-comps --save
yarn add react-uni-comps

特点 (Features)

  1. 组件丰富,体积小,自动按需加载 (rich components, small size and load on-demand)
  2. 同时支持桌面和移动端,同一套组件,一致的开发体验 (support both desktop and mobile browser environments)
  3. 纯 react-hooks 实现, 拥抱 react 未来 (written in react hooks)
  4. 样式采用 css-in-js (styles based on styled-components, a css-in-js library)
  5. 使用typescript编写,内置类型定义,开发智能提示 (written in typescript with predictable static types.)
  6. 重新导出了三方组件/库/自定义 hooks 等,方便基于同一套技术栈开发 / 扩展 (re-export 3rd-party libs, easy to extend and customize with the same tech stack )

按需加载 (Load On Demand)

支持基于 Tree Shaking 的按需加载,大部分构建工具(例如 webpack 4+ 和 rollup)都支持 Tree Shaking。

supports on-demand loading based on Tree Shaking, most build tools (such as webpack 4+ and rollup) support Tree Shaking.

主题色 (Theme)

使用ThemeProvider包裹根组件

Use ThemeProvider to wrap your root component.

<ThemeProvider color="#409eff">
  <App>
</ThemeProvider>

样式 (Styles)

样式基于styled-components, 一个流行的css-in-js 库

styles are based on styled-components , a popular react css-in-js lib

import { Button, styled } from 'react-uni-comps';

const StyledButton = styled(Button)`
  width: 80px;
  height: 32px;
  border-radius: 4px;
`;

<StyledButton>Customized Button</StyledButton>;

三方库 (3rd party libs)

// styled-components
import { styled, css, keyframes, createGlobalStyle } from 'react-uni-comps';

// clsx
import { clsx } from 'react-uni-comps';

// react-transition-group
import { CSSTransition, Transition, TransitionGroup } from 'react-uni-comps';

// react-spring
import { useSpring, animated, easings } from 'react-uni-comps';

// sortablejs
import { Sortable } from 'react-uni-comps';

// nanoid
import { nanoid } from 'react-uni-comps';