Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/paddymul/buckaroo-js-core


https://github.com/paddymul/buckaroo-js-core

Last synced: 15 days ago
JSON representation

Awesome Lists containing this project

README

        

# react-edit-list

[![License: ISC](https://img.shields.io/github/license/mmomtchev/react-edit-list)](https://github.com/mmomtchev/react-edit-list/blob/main/LICENSE) [![npm version](https://img.shields.io/npm/v/react-edit-list)](https://www.npmjs.com/package/react-edit-list) [![Node.js CI](https://github.com/mmomtchev/react-edit-list/workflows/Node.js%20CI/badge.svg)](https://github.com/mmomtchev/react-edit-list/actions?query=workflow%3A%22Node.js+CI%22) [![codecov](https://codecov.io/gh/mmomtchev/react-edit-list/branch/main/graph/badge.svg?token=ZHVvNADJrZ)](https://codecov.io/gh/mmomtchev/react-edit-list)

Universal Editable List React Component

`react-edit-list` allows for easy creation of editable lists in React that can be interfaced with a database

* Fully customizable
* Zero-dependency
* Supports async callbacks for calling externals APIs
* Supports input validation
* Supports optional `null` fields
* Supports custom field types

# Installation

```shell
npm i --save react-edit-layers
```

# Usage

Refer to the [examples](https://mmomtchev.github.io/react-edit-list/)

![screenshot](https://raw.githubusercontent.com/mmomtchev/react-edit-list/main/screen-animation.gif)

# API

### Table of Contents

* [\_](#\_)
* [AnimationTiming](#animationtiming)
* [AnimationDuration](#animationduration)
* [React](#react)
* [defaultProps](#defaultprops)

## \_

This module contains the standard library from rechart so that base rechart code cna be imported with the minimum amount of rewriting

## AnimationTiming

The type of easing function to use for animations

Type: (`"ease"` | `"ease-in"` | `"ease-out"` | `"ease-in-out"` | `"linear"`)

## AnimationDuration

Specifies the duration of animation, the unit of this option is ms.

Type: [number](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number)

## React

Reimplementation of rechart tooltips. most of this is copied from ??? in the recharts source tree because the parts we are editting are deeply embedded into functions.

Most of the point of this is to get tooltips to be absolutely positioned off of document.body, not the nearest parent element. AG-Grid hides those tooltips otherwise.

## defaultProps

needs to be set so that renderByOrder can access an have default values for
children.props when there are no props set by the consumer
doesn't work if using default parameters