页:1

你也许在找 反应相撞。本软件包(除 @ collapsed/ core (帮助) @ info)是一个WIP重写来创建"香草JS"核心.

@ collapsed/ react( 使用 Collapse)

用于创建可访问扩展/缩合组件的回放钩. 使用 CSS 转换自 0 改为 auto。 。 。 .

特征

• 处理你元素的动画高度, auto 包括!
• 你控制着UI useCollapse 提供必要的道具,您可以控制样式和元素.
• 从盒子里可以进入 - 不需要担心你的倒闭/扩展组件能否进入,因为这能照顾你!
• 不需要动画框架! 仅由 CSS 动画提供动力
• 在类型脚本中写入

演示

看演示网站!

代码箱演示

安装

$ npm i @collapsed/react

使用量

简单使用

import React from "react";
import { useCollapse } from "@collapsed/react";

function Demo() {
  const { getCollapseProps, getToggleProps, isExpanded } = useCollapse();

  return (
    <div>
      <button {...getToggleProps()}>
        {isExpanded ? "Collapse" : "Expand"}
      </button>
      <section {...getCollapseProps()}>Collapsed content 🙈</section>
    </div>
  );
}

自己来控制吧

import React, { useState } from "react";
import { useCollapse } from "@collapsed/react";

function Demo() {
  const [isExpanded, setExpanded] = useState(false);
  const { getCollapseProps, getToggleProps } = useCollapse({ isExpanded });

  return (
    <div>
      <button
        {...getToggleProps({
          onClick: () => setExpanded((prevExpanded) => !prevExpanded),
        })}
      >
        {isExpanded ? "Collapse" : "Expand"}
      </button>
      <section {...getCollapseProps()}>Collapsed content 🙈</section>
    </div>
  );
}

API 密码

useCollapse 选择以下选项:

interface UseCollapseOptions {
  /** If true, the disclosure is expanded. */
  isExpanded?: boolean;
  /**
   * If true, the disclosure is expanded when it initially mounts.
   * @default false
   */
  defaultExpanded?: boolean;
  /** Handler called when the disclosure expands or collapses */
  onExpandedChange?: (state: boolean) => void;
  /** Handler called at each stage of the animation. */
  onTransitionStateChange?: (
    state:
      | "expandStart"
      | "expanding"
      | "expandEnd"
      | "collapseStart"
      | "collapsing"
      | "collapseEnd",
  ) => void;
  /** Timing function for the transition */
  easing?: string;
  /**
   * Duration of the expand/collapse animation.
   * If 'auto', the duration will be calculated based on the height of the collapse element
   */
  duration?: "auto" | number;
  /** Height in pixels that the collapse element collapses to */
  collapsedHeight?: number;
  /**
   * Unique identifier used to for associating elements appropriately for accessibility.
   */
  id?: string;
}

并返回以下 API :

interface CollapseAPI {
  isExpanded: boolean;
  setExpanded: (update: boolean | ((prev: boolean) => boolean)) => void;
  getToggleProps: <T extends HTMLElement>(
    props?: React.ComponentPropsWithoutRef<T> & { refKey?: string },
  ) => React.ComponentPropsWithRef<T>;
  getCollapseProps: <T extends HTMLElement>(
    props?: React.ComponentPropsWithoutRef<T> & { refKey?: string },
  ) => React.ComponentPropsWithRef<T>;
}

替代解决方案

• 反应-春季 - JavaScript 动画基于库,有可能有更平滑的动画. 要创建可用的崩溃组件, 还需要做更多的工作 .
• 反应-活体-高 - 另一个使用 CSS 向任何高度的动能过渡的库。 它提供组件,而不是钩.

财务问题

// from
<div {...getCollapseProps({style: {padding: 20}})}
  This will do weird things
</div>

// to
<div {...getCollapseProps()}
  <div style={{padding: 20}}>
    Much better!
  </div>
</div>