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

@huxy/components

v2.1.17

Published

simple components

Downloads

173

Readme

components

GitHub license npm version npm

Anico

几个动效 icon,默认三条短横线。

type: close、right、bottom、play

default:''

<Anico type="{type}" />

Base64Image

将图片 src 地址 改为 base64。

<Base64Image {...props} />

loadError/ErrorBoundary/HandleError

错误边界处理。

<ErrorBoundary fallback="{loadError}">
  <ErrorComp state="{demoError}" name="eb" />
</ErrorBoundary>

<HandleError>
  <ErrorComp state="{demoError}" name="eb" />
</HandleError>

fixEle/fixIcon

对传入的元素兼容处理。如传入函数、react 对象、原生 dom、className、注入元素、默认元素、null等。

const Ele = fixEle(iconList)(iconValue); const Icon = fixIcon(icons);

<Icon icon="home" />

FullPage

全屏面板。

  • panel:面板元素
  • fullIcon:最大化 icon,默认'...'
  • exitIcon:最小化 icon,默认'...'
<FullPage panel="{panel}" fullIcon="..." exitIcon="---" />

Row/Col

栅格布局,默认分为 12 列。

  • gutter:间隔大小,默认 10px
  • span:栅格等分,默认 12
  • offset:栅格左侧的间隔格数,默认 0
  • xs:<768px,可为栅格数或一个包含其他属性的对象
  • sm:768px<x<992px,可为栅格数或一个包含其他属性的对象
  • md:992px<x<1200px,可为栅格数或一个包含其他属性的对象
  • lg:1200px<x<1600px,可为栅格数或一个包含其他属性的对象
  • xl:>1600px,可为栅格数或一个包含其他属性的对象
  • width:自定义栅格宽度
  • auto:响应式栅格宽度
  • offsetWidth:左侧或右侧宽度
<Row gutter={12}>
  <Col span={6} offset={3} xs={{span: 12, offset: 0}} sm={{span: 12, offset: 0}} md={12} lg={6} xl={{span: 3, offset: 2}}}></Col>
</Row>

<Row>
  <Col width="240px"></Col>
  <Col auto offsetWidth="240px"></Col>
</Row>

Grid

基于 Row/Col 的栅格布局。

<Grid rowProps="{{gutter:" 12}} colProps="{{span:" 6}} Row="{}" Col="{}">
  <p>list 1</p>
  <p>list 2</p>
  <p>list 3</p>
</Grid>

MaxSize

最大化面板。

  • panel:最大化面板挂载元素,默认 body
  • target:最大化元素或类名
  • fullIcon:最大化 icon,默认'...'
  • exitIcon:最小化 icon,默认'...'
<MaxSize target="{target}" panel="{panel}" fullIcon="..." exitIcon="---" />

Portal

  • mountNode:挂载点,默认document.body
<Portal mountNode="{}"> portal </Portal>

Mask

遮罩层

  • mountNode:挂载点,默认document.body
  • open:展示隐藏状态
  • close:关闭事件
  • delay:延迟关闭时间,默认 300ms
<Mask open="{open}" close="{()" =""> setOpen(false)} /></Mask>

Modal

模态框

  • open:展示隐藏状态
  • cancel:关闭事件
  • cancelText:关闭文本
  • submit:确定事件
  • submitText:确定文本
  • title:标题
<Modal open="{open}" cancel="{()" =""> setOpen(false)} cancelText="取消" submit={() => setOpen(false)} submitText="确定" title="Modal 弹窗"> ... </Modal>

Panel

面板

  • title:标题
  • plugins:标题右侧事件区域,如最大化、刷新等
  • loading:加载状态
<Panel title="panelTitle" plugins="{[]}"> ... </Panel>

Spinner

加载动画

  • global:是否为全局加载动画
  • absolute:是否相对容器绝对定位
<Spinner global /> <Spinner absolute />

TabHeader

tab 切换

  • activekey:选中 tab 项,默认选中第一个
  • tabs:tabs 列表,[{key: '', value: '', renderTabs: null}],key 为 tab 的 key 值,value 为展示名,renderTabs 是自定义渲染内容
  • switchTab:切换 tab 事件
  • flex:tabs 是否撑满容器
  • trackColor:tabs 与 content 间边框颜色
<TabHeader
  tabs={[
    {key: 1, value: 'tab1'},
    {key: 2, value: 'tab2'},
  ]}
  switchTab={() => {}}
  flex
/>

Drawer

抽屉柜

  • open:是否展示
  • close:关闭事件
  • footer:脚部内容
  • header:头部内容
  • width:宽度,默认 300px
<Drawer
  close={() => setOpen(false)}
  open={open}
  className="configs-drawer"
  width="300px"
  header={
    <div>
      <Button onClick={() => saveConfig()}>{i18nCfg.saveConfig}</Button>
      <Button type="primary" onClick={() => copyConfig()} style={{marginLeft: 12}}>
        {i18nCfg.copyConfig}
      </Button>
    </div>
  }
>
  <TabHeader flex tabs={tabs(i18nCfg)} switchTab={key => setActive(key)} />
  <div className="layout-setting" style={{padding: '15px 0'}}>
    {comps[active]}
  </div>
</Drawer>

Drop

元素触发位置展示弹出层信息。可根据元素所在位置自动优化展示层的位置。

  • trigger:触发动作,默认 click
  • dropList:弹出层内容 DOM。
<Drop trigger="contextMenu" dropList="{fileDrop(filename)}">
  <div>{filename}</div>
</Drop>

renderTree/Tree

渲染树。如菜单展示,支持横纵切换。

renderTree:

  • data:树对象 []。
  • events:节点事件表。如点击、鼠标移动等。{onClick: () => {}, onMouseEnter: () => {}, ...}
  • Link:链接跳转,默认 a 标签跳转。
  • List: 节点列表容器,默认 const DefList = props => <ul {...props} />;

Tree:

  • data:树对象 []。
  • type:展示类型,默认 'vertical' 。
  • collapsed:是否为收缩状态,默认 'false' 。
  • Link:链接跳转,默认 a 标签跳转。
  • width:菜单宽度。
  • bgColor:背景颜色。
  • itemHeight:菜单节点高度。
<ul className="huxy-tree-root">
  {render(data, events, Link, List)}
</ul>

<Tree data="{navMenu}" type="horizontal" Link="{Link}" style="{navMenuStyle}" />

Carousel

轮播图。

<Carousel>
  <div style={{height: '200px', background: 'var(--blue1)'}}>item1</div>
  <div style={{height: '200px', background: 'var(--orange1)'}}>item2</div>
  <div style={{height: '200px', background: 'var(--green1)'}}>item3</div>
  <div style={{height: '200px', background: 'var(--yellow1)'}}>item4</div>
  <div style={{height: '200px', background: 'var(--red1)'}}>item5</div>
</Carousel>

Tooltip

<Tooltip placement="topRight"> hello worldhello worldhello worldhello worldhello world </Tooltip>
  • placement:tooltip 位置,有 topRight | topLeft | bottomRight | bottomLeft | rightTop ,默认 topRight 。

Ellipsis

超出容器宽度展示省略号并且鼠标移上去有 tooltip 。

<Ellipsis> hello worldhello worldhello worldhello worldhello world </Ellipsis>
<Ellipsis>
  <Tooltip placement="topLeft" title="hhhhhhhhh">
    <span>hhhhhhhhh</span>
  </Tooltip>
</Ellipsis>