Version Packages

[github-actions]

This PR was opened by the Changesets release GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to main, this PR will be updated.

Releases

react-collapsed@4.0.2

Patch Changes

• 980b971: Fixed mismatched logic for prefer-reduced-motion

Major Changes

• 5e427ec: This is a big refactor of react-collapsed, enough I wanted to denote it with a new major version.

  BREAKING CHANGES

  • expandStyles and collapseStyles options have been removed.

  • onExpandStart, onExpandEnd, onCollapseStart, onCollapseEnd options have been removed and replaced with onTransitionStateChange:

    const useCollapse({
      onTransitionStateChange(stage) {
        switch (stage) {
          case 'expandStart':
          case 'expandEnd':
          case 'expanding':
          case 'collapseStart':
          case 'collapseEnd':
          case 'collapsing':
            // do thing
          default:
            break;
        }
      }
    })

  Other changes

  • Unique IDs for accessibility are now generated with React.useId if it's available.
  • Styles assigned to the collapse element are now assigned to the DOM element directly via a ref, and no longer require ReactDOM.flushSync to update styles in transition.
  • Added role="region" to collapse.
  • Added logic to handle disabling the animation if the user has the prefers reduced motion setting enabled.
  • Replaced animation resolution handling to a programmatic timer, instead of the 'transitionend' event. Should fix Since switching to createRoute (concurrent React), inline styles are sometimes not updated #103.
  • Improved the types for getCollapseProps and getToggleProps, so their arguments and return type is more accurately typed. This should help catch cases when props returned by the getters are duplicated on the component (such as ref or style).
  • Changes the props returned by getToggleProps depending on the HTML tag of the component.

2.0.0

Complete rewrite using React hooks!

• Ends support for React versions < 16.8.x
• Library now exports a custom hook in lieu of a render prop component
• Adds support for unmounting the contents of the Collapse element when closed

import React from 'react'
import useCollapse from 'react-collapsed'

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

  return (
    <>
      <button {...getToggleProps()}>{isOpen ? 'Collapse' : 'Expand'}</button>
      <section {...getCollapseProps()}>Collapsed content 🙈</section>
    </>
  )
}

1.0.0

Bumped to full release! :)

• duration, easing, and delay now support taking an object with in and out keys to configure differing in-and-out transitions

0.2.0

Breaking Changes

• getCollapsibleProps => getCollapseProps. Renamed since it's easier to spell 😅

Other

• Slew of Flow bug fixes
• Improved documentation

0.1.3

• ESLINT wasn't working properly - fixed this
• Added files key to package.json to improve NPM load

[netlify]

✅ Deploy Preview for react-collapsed ready!

Name	Link
🔨 Latest commit	9a4575a
🔍 Latest deploy log	https://app.netlify.com/sites/react-collapsed/deploys/6430246f5780ff0008b4d22e
😎 Deploy Preview	https://deploy-preview-142--react-collapsed.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.