Package Exports

react-text-admin
react-text-admin/dist/index.cjs.js
react-text-admin/dist/index.es.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-text-admin) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

React Text Admin

This library allows you to edit text inside HTML elements.

Getting Started

Install the library by running: npm i react-text-admin;
Export and wrap your application with the EditTableStateProvider component:

import { EditTableStateProvider } from 'react-text-admin'

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
    <EditTableStateProvider>
        <App />
    </EditTableStateProvider>
);

Usage

To make the text within an HTML element editable, you need to export the EditableText component from the library and place it in front of the element using dot notation. After that, you should assign an id to it for element identification:

import { EditableText } from 'react-text-admin';

const App = () => {
    return (
        <>
            <EditableText.h1 id='1' className={styles.test}>
                test text
            </EditableText.h1>
        </>
    );
};

To enable text editing, you need to export the useEditTableState hook and retrieve either the toggleEditState or setEditState function from it. Both functions accept the element ID(s) as a string or an array of strings:

import { EditableText, useEditTableState } from 'react-text-admin';

const App = () => {
    const { toggleEditState, editStates, setEditState } = useEditTableState();

    return (
        <>
            <EditableText.h1 id='1' className={styles.test}>
                test text
            </EditableText.h1>
            <EditableText.h1 id='2' className={styles.test}>
                test text
            </EditableText.h1>
            <button
                style={{ marginTop: '20px' }}
                onClick={() => toggleEditState('1')}
            >
                test button toggle
            </button>
            <button
                style={{ marginTop: '20px' }}
                onClick={() => toggleEditState(['1', '2'])}
            >
                test button mass toggle
            </button>
            <button
                style={{ marginTop: '20px' }}
                onClick={() => setEditState('1', true)}
            >
                test button
            </button>
            <button
                style={{ marginTop: '20px' }}
                onClick={() => setEditState(['1', '2'], false)}
            >
                test button mass
            </button>
        </>
    );
};

The difference between toggleEditState and setEditState is that with setEditState, you explicitly specify the edit state for the elements.

The editStates object stores the state of each element, where the key is the id value, and the value is the boolean state of the element.