react-toggle-edit

A React component that allows you to toggle between a "view" mode and an "edit" mode. This is useful for scenarios where you want to display content in a non-editable form, but allow users to switch into an editable state to modify the data.

Features

• Toggleable: Switches between viewing and editing modes.
• Customizable Components: Accepts custom View and Edit components to tailor the display and editing experience.
• Controlled State: Manages the state internally, passing necessary props to the provided components.

Installation

npm install @thestartupfactory/react-toggle-edit

Usage

The ToggleableEdit component accepts a value, a view component to display the data, and an edit component to allow modifications. It handles switching between these two components internally.

Props

• initialValue: T - The initial value that will be passed to both the ViewComponent and EditComponent.
• ViewComponent: React.FC<ViewProps> - A component to render the view mode. It receives value and a startEditing function.
• EditComponent: React.FC<EditProps> - A component to render the edit mode. It receives initialValue, onUpdated to handle changes, and stopEditing to exit edit mode.
• onUpdated: (value: T) => void - A callback that is triggered whenever the value is updated in the edit mode.

Example

import React, { useState } from 'react';
import ToggleableEdit from '@thestartupfactory/react-toggle-edit';

// Example view component
const MyViewComponent: React.FC<{
  value: string;
  startEditing: () => void;
}> = ({ value, startEditing }) => (
  <div>
    <span>{value}</span>
    <button onClick={startEditing}>Edit</button>
  </div>
);

// Example edit component
const MyEditComponent: React.FC<{
  initialValue: string;
  onUpdated: (value: string) => void;
  stopEditing: () => void;
}> = ({ initialValue, onUpdated, stopEditing }) => {
  const [inputValue, setInputValue] = useState(initialValue);

  const handleSave = () => {
    onUpdated(inputValue);
    stopEditing();
  };

  return (
    <div>
      <input
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
      />
      <button onClick={handleSave}>Save</button>
      <button onClick={stopEditing}>Cancel</button>
    </div>
  );
};

const App = () => {
  const handleUpdate = (newValue: string) => {
    console.log('Updated value:', newValue);
  };

  return (
    <ToggleableEdit
      initialValue="This is some text"
      ViewComponent={MyViewComponent}
      EditComponent={MyEditComponent}
      onUpdated={handleUpdate}
    />
  );
};

export default App;