Cruds

Cruds UI Component

Installation

npm i @synerise/ds-cruds
or
yarn add @synerise/ds-cruds

Usage

import Cruds from '@synerise/ds-cruds'
<Cruds
onAdd={handleAdd}
onDelete={handleDelete}
onRemove={handleRemove}
onMove={handleMove}
onEdit={handleEdit}
onDuplicate={handleDuplicate}
addTooltip={'Add'}
deleteTooltip={'Delete'}
duplicateTooltip={'Duplicate'}
editTooltip={'Edit'}
moveTooltip={'Move'}
removeTooltip={'Remove'}
/>

Usage SingleAction

import SingleAction from '@synerise/ds-cruds/dist/SingleAction'
<SingleAction
className="settings"
title={'Settings'}
icon={<Settings2S />}
onClick={handleClick}
/>

Demo

API

PropertyDescriptionTypeDefault
addTooltipTooltip of the add buttonReact.ReactNode / string-
duplicateTooltipTooltip of the duplicate buttonReact.ReactNode / string-
deleteTooltipTooltip of the delete button (which has a different icon than remove button)React.ReactNode / string-
editTooltipTooltip of the edit buttonReact.ReactNode / string-
moveTooltipTooltip of the move buttonReact.ReactNode / string-
removeTooltipTooltip of the remove buttonReact.ReactNode / string-
onAddCallback executed after clicking the add button.(event: React.MouseEvent) => void-
onDuplicateCallback executed after clicking the duplicate button.(event: React.MouseEvent) => void-
onDeleteCallback executed after clicking the delete button.(event: React.MouseEvent) => void-
onEditCallback executed after clicking the edit button.(event: React.MouseEvent) => void-
onMoveCallback executed after clicking the move button.(event: React.MouseEvent) => void-
onRemoveCallback executed after clicking the remove button.(event: React.MouseEvent) => void-