React组件 – 折叠展开组件之@kunukn/react-collapse

“This is the second day of my participation in the November Gwen Challenge. See details of the event: The last Gwen Challenge 2021”.

Preface:

In the recent project, THE UI design used jQuery to create the animation effect of unfolding and folding. The animation duration of unfolding and folding needs to be set. After searching through a bunch of React components, I finally found one that fit the bill. It’s this @kunukn/react-collapse.

The effect is as follows:

Code address of the above effect:

Helloreact /kunukn-react-collapse at main · bettersun/helloreact (github.com)

React collapse collapse @kunukn/react-collapse

NPM address:

@kunukn/react-collapse – npm (npmjs.com)

Making address:

[kunukn/react-collapse: Component-wrapper for collapse animation with CSS for elements with variable and dynamic height (github.com)] (github.com/nkbt/react-…).

The following content is the translation of the document (human translation, understanding or translation if there is any improper, also please correct, part of the content is not translated)

The necessary CSS

⚠️ ️ You need to add styles to the CSS style file to add animations.

Ex. :

<style>. Collapse - csS-transition {transition: height 280ms cubic-bezier(0.4, 0, 0.2, 1); } </style>Copy the code

You can also add the style content to the Transition property.

  <Collapse
    transition={`heightThe ${duration} cubic-bezier(4..0.2..1) `}isOpen={isOpen}
  >
Copy the code

No animation if you do not specify this style.

Install React 16.8+

npm i @kunukn/react-collapse
# or 
# yarn add @kunukn/react-collapse 
Copy the code

Install React 16.3+

npm i @kunukn/react-collapse@^1
# or 
# yarn add @kunukn/react-collapse@^1 

Copy the code

import Collapse from "@kunukn/react-collapse";
// or with require syntax
// const Collapse = require("@kunukn/react-collapse");
 
const MyComponent = () = > (
  <Collapse isOpen={true || false} >
    <div>Your content</div>
  </Collapse>
);
Copy the code

attribute

• isOpen

  True: expand, false: fold.

• Children: child component or child component function.

  Render:

  const MyComponent = ({ isOpen }) = > (
    <Collapse isOpen={isOpen}>
      <p>Paragraph of text.</p>
      <p>Another paragraph is also OK.</p>
      <p>Images and any other content are ok too.</p>
      <img src="cutecat.gif" />
    </Collapse>
  );
  Copy the code

  Render with attribute mode:

  const MyComponent = ({ isOpen }) = > (
    <Collapse isOpen={isOpen}>
      {state => (
        <div className={`using-collapse-state-to-add-css-classThe ${state} `} >
          <p>I know the collapse state: {state}</p>
        </div>
      )}
    </Collapse>
  );
  Copy the code

• Render: render function

  const MyComponent = ({ isOpen }) = > {
    const render = state= > (
      <div className={`using-collapse-state-to-add-css-classThe ${state} `} >
        <p>I know the collapse state: {state}</p>
      </div>
    );
    return <Collapse isOpen={isOpen} render={render} />;
  };
  Copy the code

  There are four collapsibility states available: collapsed, Collapsing, Expanded, and Expanding.

• ClassName: CSS className of the child component

  You can specify a custom CSS class name. The default is collapsure-CSS-transition.

  When specifying the CSS class name of the child component, remember to add the CSS transition.

• Transition: Transforms animation parameters

  You can also use the Transition property to specify the transition of the CSS.

  const MyComponent = ({ isOpen, duration = "290ms" }) = > (
    <Collapse
      transition={`heightThe ${duration} cubic-bezier(4..0.2..1) `}isOpen={isOpen}
    >
      <p>Paragraph of text</p>
    </Collapse>
  );
  Copy the code

• ElementType: the HTML elementType of the generated child component, div by default.

  const MyComponent = ({ isOpen }) = > (
    <Collapse elementType="article" isOpen={isOpen}>
      <p>Paragraph of text inside an article element</p>
    </Collapse>
  );
  Copy the code

• CollapseHeight: height when collapsed. collapseHeight

  You can specify the height of the fold to display part of the content.

  const MyComponent = ({ isOpen }) = > (
    <Collapse collapseHeight="40px" isOpen={isOpen}>
      <p>A long paragraph of text inside an article element</p>
    </Collapse>
  );
  Copy the code

• OnChange: A toggle callback that takes state and style parameters and can be used to set state and style.

  const MyComponent = ({ isOpen }) = > {
    const onChange = ({ state, style }) = > {
      /* state: string = the state of the collapse component. style: object = styles that are applied to the component. */
    };
   
    return (
      <Collapse onChange={onChange} isOpen={isOpen}>
        <p>A long paragraph of text inside an article element</p>
      </Collapse>
    );
  };
  Copy the code

• OnInit: Similar to onChange, but only called when the DOM is loaded.

  The following is an example that starts in a collapsed state and expands on load.

  const MyComponent = () = > {
   
    const [isOpen, setIsOpen] = React.useState(false);
   
    const onInit = ({ state, style, node }) = > {
      /* node: HTMLElement = the DOM node of the component. */
    
      setIsOpen(true);
    };
   
    return (
      <div>
        <button onClick={()= >setIsOpen(state => ! state)}> Toggle</button>
        <Collapse onInit={onInit} isOpen={isOpen}>
          <p>A long paragraph of text inside an article element</p>
        </Collapse>
      </div>
    );
  };
  Copy the code

• addState

  If this property is added, the following properties are added to the component based on state.

  --c-collapsed
  --c-collapsing
  --c-expanded
  --c-expanding
  Copy the code

• noAnim

  If you add this property, there will be no animation when the collapse unfolds.

  It only switches between folded and expanded states.

• overflowOnExpanded

  If you add this property, you will expand without overflow: Hidden style.

• Custom properties, Collapse supports applying custom properties such as aria- and data- to rendered DOM elements.

  For example, to set the aria-hidden property

  const MyComponent = ({ isOpen }) = > (
    <Collapse aria-hidden={isOpen ? "false" : "true"} isOpen={isOpen}>
      <p>Paragraph of text</p>
    </Collapse>
  );
  Copy the code

  For example, to specify the animation duration, you can use the following custom properties.

  const collapseStyles = { transitionDuration: "270ms" };
   
  const MyComponent = ({ isOpen }) = > (
    <Collapse style={collapseStyles} isOpen={isOpen}>
      <p>Paragraph of text</p>
    </Collapse>
  );
  Copy the code

Supported browsers

Modern browsers above Internet Explorer 11

Supported React version

• React Version 16.3+ : Use Collapse version 1
• React Version 16.8+ : Uses Collapse version 2+

Use the lifetime of Act16.3

• Render (using folded state to call CSS Transition)
• ComponentDidMount (initially expanded or collapsed)
• GetDerivedStateFromProps (Checks isOpen and applies a new collapse state if the isOpen property is changed)
• ComponentDidUpdate (Updates style state from four folded states)

React16.8 hooks are used

• useState
• useEffect
• useRef
• useCallback
• useReducer