React Swipe Actions | NIPE Open Source

Overview

Composable React rows with measured leading and trailing actions, keyboard support, logical RTL sides, and optional full-swipe activation.

Why it exists

It supplies the row interaction while applications keep ownership of list data, mutations, undo, confirmation, and removal.

Source

Capabilities

Composable row actions
Reveals measured leading and trailing actions through composable Root, Content, Leading, Trailing, and Action components.
Source
Keyboard, focus, and RTL behavior
Documents physical-arrow keyboard controls, Escape closing, inactive-action tab order, accessible row labels, and logical leading and trailing state in LTR and RTL.
Source
Controlled rows and group coordination
Supports controlled or uncontrolled open state, optional full-swipe activation, and groups that close the previously open sibling.
Source

Limitations

Alpha scope

The 0.1 line is alpha and intentionally excludes generic gesture hooks, nested swipe roots, portals, React Native, asChild, and application list lifecycle features.

Source

Example

Example source

import {
  Action,
  Content,
  Leading,
  Root,
  Trailing,
} from '@nipe-solutions/react-swipe-actions'
import '@nipe-solutions/react-swipe-actions/core.css'

<Root aria-label="Message actions">
  <Leading>
    <Action onAction={archive}>Archive</Action>
  </Leading>
  <Content>Quarterly planning</Content>
  <Trailing>
    <Action destructive fullSwipe onAction={remove}>Delete</Action>
  </Trailing>
</Root>

Install

npm install @nipe-solutions/react-swipe-actions