@asphalt-react/actionlist

Actionlist

A component to display a list of actions. It consists of 2 components

• Actionlist
• Action

Actionlist provides accessibility features to operate on Actions. It also represents bunch of provided Actions as a list.

An Action can function as any HTML or React element, it also supports qualifier to add icons before the caption for an action. A qualifier accepts SVG or SVG wrapped React component.

💡 Checkout @asphalt-react/iconpack for SVG wrapped React components.

Accessibility

• Navigate among Actions using ↑ and ↓ arrow keys.
• home and end focuses the first and last Actions respectively.
• Action and Actionlist takes care of necessary aria-* attributes.
• You can also add other aria-attributes like aria-labelledby, aria-label.

Usage

import Actionlist, { Action } from "@asphalt-react/actionlist"

function App () {

    return (
        <Actionlist>
            <Action as={Link} tagProps={{ to: "/document/edit" }}>
                Edit
            </Action>
            <Action actionable tagProps={{ onClick: (event) => {} }}>
                Clone
            </Action>
            <Action>Share</Action>
            <Action>Delete</Action>
        </Actionlist>
    )
}

export default App;

Props

children

List of actions to display inside Actionlist

type	required	default
node	true	N/A

Action

An action item in an Actionlist. It renders an <a> tag by default.

Props

children

Add content for each Action

type	required	default
node	false	N/A

qualifier

Renders an icon before the Action's content. Accepts SVG or SVG wrapped React component.

Checkout @asphalt-react/iconpack for SVG wrapped React components.

type	required	default
element	false	N/A

danger

Applies danger styles to Action

type	required	default
bool	false	false

actionable

Action behaves like a button

type	required	default
bool	false	false

as

HTML element/React component to be rendered

type	required	default
elementType	false	N/A

tagProps

Props for the Action element being rendered Attributes like onKeyPress, href can be passed

type	required	default
object	false	{}

separator

Renders a separator before the Action, except for first one.

type	required	default
bool	false	false