@deltablot/malle

malle

Edit in place library with no dependencies and small footprint.

Description

malle allows you to listen to a particular event (e.g. click, hover) on an element (e.g. p, span) and transform that element into an input that will be processed by a function.

The event can be: click or hover.

The element can be a p, div, span, ...

The created input can be a normal input or a textarea.

The user provided function will typically POST to an endpoint to get some JSON back.

Demo

Live demo: https://deltablot.github.io/malle/

Installation

npm i @deltablot/malle
# or
yarn add @deltablot/malle

Quickstart

This is a minimal example:

import { Malle } from '@deltablot/malle';

// now create the malle
const malle = new Malle({
  // this is the function that will be called once user has finished entering text (press Enter or click outside)
  // it receives the new value, the original element, the event and the input element
  fun: (value, original, event, input) => {
    console.log(`New text: ${value}`);
    console.log(`Original element:`);
    console.log(original);
    // add here your code for POSTing the new value
    return myFunctionReturingAPromiseString();
  },
}).listen(); // directly start listening after object creation

In this example, when a user clicks on an element with data-malleable='true', the function in the fun option will be called. The element will be replaced by a form containing the input and optionally action buttons (Submit, Cancel).

Head to the Demo to see more examples.

See the API Documentation for usage and available options.