### Setup and Run Example App (Without Nix)

Source: https://github.com/alioguzhan/react-editext/blob/master/README.md

This sequence of commands navigates into the example application directory, installs its specific dependencies, and starts its development server. After execution, the example app can be accessed via http://localhost:3000.

```bash
cd example
yarn install
yarn start
```

--------------------------------

### Install Dependencies and Start Watch Process (Without Nix)

Source: https://github.com/alioguzhan/react-editext/blob/master/README.md

These commands are used to set up the project without Nix. First, it installs all necessary project dependencies using Yarn. Then, it starts the rollup watch process, which automatically rebuilds the project upon code changes.

```bash
yarn install
yarn start
```

--------------------------------

### Start Development Environment with Nix

Source: https://github.com/alioguzhan/react-editext/blob/master/README.md

This command initiates a pure Nix shell, which sets up a development environment for both the library and the example application. It is designed to provide a consistent and isolated development experience.

```bash
nix-shell --pure
develop
```

--------------------------------

### Install react-editext

Source: https://github.com/alioguzhan/react-editext/blob/master/README.md

Commands to add the react-editext package to your project using npm or yarn.

```bash
npm install --save react-editext
```

```bash
yarn add react-editext
```

--------------------------------

### Implement basic EdiText component

Source: https://github.com/alioguzhan/react-editext/blob/master/README.md

A basic example showing how to import and use the EdiText component within a functional React component, including state management for the edited value.

```jsx
import React, { useState } from 'react';

import EdiText from 'react-editext';

function Example(props) {
  const [value, setValue] = useState('What is real? How do you define real?');

  const handleSave = (val) => {
    console.log('Edited Value -> ', val);
    setValue(val);
  };
  return (
    <div className="container">
      <EdiText type="text" value={value} onSave={handleSave} />
    </div>
  );
}
```

--------------------------------

### Implement basic EdiText component

Source: https://context7.com/alioguzhan/react-editext/llms.txt

Demonstrates the fundamental usage of the EdiText component by binding a state value and handling the save event. This is the simplest implementation to enable inline editing.

```jsx
import React, { useState } from 'react';
import EdiText from 'react-editext';

function BasicExample() {
  const [value, setValue] = useState('Click the edit button to modify this text');

  const handleSave = (newValue) => {
    console.log('Saved value:', newValue);
    setValue(newValue);
  };

  return (
    <EdiText
      type="text"
      value={value}
      onSave={handleSave}
    />
  );
}
```

--------------------------------

### Configure various input types

Source: https://context7.com/alioguzhan/react-editext/llms.txt

Shows how to utilize different input types such as textarea, date, email, and number. It demonstrates the use of the inputProps object to pass native HTML attributes to the underlying input elements.

```jsx
import React from 'react';
import EdiText from 'react-editext';

function InputTypesExample() {
  const handleSave = (val) => console.log('Saved:', val);

  return (
    <div>
      <EdiText type="text" value="Simple text input" onSave={handleSave} />
      <EdiText
        type="textarea"
        inputProps={{ rows: 5, placeholder: 'Enter long content here', style: { minWidth: 300 } }}
        value="This is a longer piece of content."
        onSave={handleSave}
      />
      <EdiText
        type="date"
        inputProps={{ min: '2020-01-01', max: '2030-12-31' }}
        value="2024-06-15"
        onSave={handleSave}
      />
      <EdiText type="email" value="user@example.com" onSave={handleSave} />
      <EdiText
        type="number"
        inputProps={{ min: 0, max: 100, step: 5 }}
        value="50"
        onSave={handleSave}
      />
    </div>
  );
}
```

--------------------------------

### Configure Keyboard Shortcuts and Focus Behavior

Source: https://context7.com/alioguzhan/react-editext/llms.txt

Configures keyboard interactions such as saving on Enter or cancelling on Escape. Also demonstrates focus-based triggers like submitOnUnfocus and startEditingOnFocus.

```jsx
import React, { useState } from 'react';
import EdiText from 'react-editext';

function KeyboardShortcutsExample() {
  const handleSave = (val) => console.log('Saved:', val);

  return (
    <div>
      <EdiText
        type="text"
        value="Press Enter to save, Escape to cancel"
        onSave={handleSave}
        submitOnEnter
        cancelOnEscape
      />
      <EdiText
        type="text"
        value="Click outside to save automatically"
        onSave={handleSave}
        submitOnUnfocus
      />
      <EdiText
        type="text"
        value="Click outside to cancel"
        onSave={handleSave}
        cancelOnUnfocus
        onCancel={(val) => console.log('Cancelled:', val)}
      />
      <EdiText
        type="text"
        value="Tab here to start editing"
        tabIndex={1}
        onSave={handleSave}
        startEditingOnFocus
        submitOnUnfocus
      />
      <EdiText
        type="text"
        value="Focus and press Enter to edit"
        tabIndex={2}
        onSave={handleSave}
        startEditingOnEnter
        submitOnUnfocus
      />
    </div>
  );
}
```

--------------------------------

### Handle EdiText Lifecycle Events

Source: https://context7.com/alioguzhan/react-editext/llms.txt

Demonstrates the use of onSave, onCancel, and onEditingStart callbacks to track editing lifecycle events. These callbacks receive the current input value and optional inputProps.

```jsx
import React, { useState } from 'react';
import EdiText from 'react-editext';

function EventsExample() {
  const [logs, setLogs] = useState([]);
  const [value, setValue] = useState('Edit me to see events');

  const addLog = (message) => {
    setLogs(prev => [...prev, `${new Date().toLocaleTimeString()}: ${message}`]);
  };

  return (
    <div>
      <EdiText
        type="text"
        value={value}
        onSave={(val, inputProps) => {
          addLog(`SAVED: "${val}" (input name: ${inputProps?.name || 'unnamed'})`);
          setValue(val);
        }}
        onCancel={(val, inputProps) => {
          addLog(`CANCELLED: was editing "${val}"`);
        }}
        onEditingStart={(val, inputProps) => {
          addLog(`EDITING STARTED: current value is "${val}"`);
        }}
        inputProps={{ name: 'myField' }}
      />

      <div style={{ marginTop: 20 }}>
        <h4>Event Log:</h4>
        <ul>
          {logs.map((log, i) => <li key={i}>{log}</li>)}
        </ul>
        <button onClick={() => setLogs([])}>Clear Logs</button>
      </div>
    </div>
  );
}
```

--------------------------------

### Display Hint Messages in React EdiText

Source: https://context7.com/alioguzhan/react-editext/llms.txt

Demonstrates how to use the `hint` prop in React EdiText to display helper text below the input field. The hint can be a simple string or a custom React node for advanced formatting. This feature enhances user guidance during editing.

```jsx
import React from 'react';
import EdiText from 'react-editext';

function HintExample() {
  const handleSave = (val) => console.log('Saved:', val);

  return (
    <div>
      {/* Simple text hint */}
      <EdiText
        type="text"
        value="Edit this field"
        onSave={handleSave}
        hint="Enter a value between 5-50 characters"
      />

      {/* Custom styled hint */}
      <EdiText
        type="email"
        value="user@example.com"
        onSave={handleSave}
        hint={
          <span style={{ color: '#666', fontStyle: 'italic', fontSize: '12px' }}>
            ℹ️ We'll never share your email with anyone
          </span>
        }
      />

      {/* Hint with link */}
      <EdiText
        type="text"
        value="Enter your username"
        onSave={handleSave}
        hint={
          <span>
            See our <a href="/guidelines" target="_blank">username guidelines</a>
          </span>
        }
      />
    </div>
  );
}

```

--------------------------------

### Configure Hover-based Button Visibility

Source: https://context7.com/alioguzhan/react-editext/llms.txt

Shows how to use the 'showButtonsOnHover' prop to improve UI cleanliness by hiding action buttons until the user interacts with the component. It also demonstrates combining this with 'editOnViewClick' for an improved user experience.

```jsx
import React from 'react';
import EdiText from 'react-editext';

function ShowOnHoverExample() {
  return (
    <EdiText
      type="text"
      value="Hover over me to see the edit button"
      onSave={(val) => console.log('Saved:', val)}
      showButtonsOnHover
      editOnViewClick
    />
  );
}
```

--------------------------------

### Style EdiText using Styled Components

Source: https://context7.com/alioguzhan/react-editext/llms.txt

Demonstrates how to target internal EdiText elements using the 'editext' data attribute. This allows for granular styling of buttons, containers, and inputs within a styled-components wrapper.

```jsx
import React from 'react';
import styled from 'styled-components';
import EdiText from 'react-editext';

const StyledEdiText = styled(EdiText)`
  &[editext="main-container"] {
    font-family: 'Arial', sans-serif;
  }
  button[editext="edit-button"] {
    background: #3498db;
    color: white;
  }
`;

function StyledComponentsExample() {
  return (
    <StyledEdiText
      type="text"
      value="Beautifully styled with styled-components"
      onSave={(val) => console.log('Saved:', val)}
    />
  );
}
```

--------------------------------

### Customize EdiText internal elements with props

Source: https://context7.com/alioguzhan/react-editext/llms.txt

Demonstrates how to inject custom attributes and styles into the input, display, and container elements of the EdiText component using inputProps, viewProps, and containerProps. This allows for seamless integration with existing CSS frameworks or custom design systems.

```jsx
import React, { useState } from 'react';
import EdiText from 'react-editext';

function PropsCustomizationExample() {
  const [liveValue, setLiveValue] = useState('Initial value');

  const handleSave = (val) => {
    console.log('Saved:', val);
    setLiveValue(val);
  };

  return (
    <div>
      <EdiText
        type="text"
        value={liveValue}
        onSave={handleSave}
        inputProps={{
          placeholder: 'Type here...',
          name: 'customField',
          className: 'form-control',
          style: {
            backgroundColor: '#f5f5f5',
            border: '2px solid #007bff',
            padding: '10px',
            fontSize: '16px'
          },
          onChange: (e) => setLiveValue(e.target.value),
          maxLength: 100
        }}
      />
      <EdiText
        type="text"
        value="Styled view element"
        onSave={handleSave}
        viewProps={{
          className: 'display-text',
          style: {
            backgroundColor: '#e3f2fd',
            padding: '15px',
            borderRadius: '8px',
            fontWeight: 'bold',
            fontSize: '18px'
          }
        }}
      />
      <EdiText
        type="text"
        value="Custom container"
        onSave={handleSave}
        containerProps={{
          className: 'editext-wrapper',
          style: {
            border: '1px solid #ddd',
            padding: '20px',
            borderRadius: '4px',
            marginTop: '10px'
          }
        }}
        buttonsContainerProps={{
          style: { marginLeft: '10px' }
        }}
      />
    </div>
  );
}
```

--------------------------------

### Implement custom input validation

Source: https://context7.com/alioguzhan/react-editext/llms.txt

Illustrates how to add synchronous and asynchronous validation to EdiText. It covers displaying custom error messages and handling validation failures with custom callback functions.

```jsx
import React, { useState } from 'react';
import EdiText from 'react-editext';

function ValidationExample() {
  const [username, setUsername] = useState('john_doe');
  const validateLength = (val) => val.length >= 3;
  const validateAsync = async (val) => {
    await new Promise(resolve => setTimeout(resolve, 500));
    return !val.toLowerCase().includes('admin');
  };

  return (
    <div>
      <EdiText
        type="text"
        value={username}
        onSave={setUsername}
        validation={validateLength}
        validationMessage="Username must be at least 3 characters"
      />
      <EdiText
        type="text"
        value="Enter any text"
        onSave={(val) => console.log('Saved:', val)}
        validation={(val) => val.toLowerCase().indexOf('admin') < 0}
        onValidationFail={(val) => alert(`"${val}" is not valid!`)}
      />
      <EdiText
        type="text"
        value="async-validated-value"
        onSave={(val) => console.log('Saved:', val)}
        validation={validateAsync}
        validationMessage="Validation failed (async check)"
      />
    </div>
  );
}
```

--------------------------------

### Style EdiText components with CSS attribute selectors

Source: https://github.com/alioguzhan/react-editext/blob/master/README.md

Demonstrates how to target specific internal elements of the EdiText component using the 'editext' attribute. This allows for granular styling of buttons, containers, and input fields using standard CSS.

```css
button[editext='cancel-button'] {
  &:hover {
    background: crimson;
    color: #fff;
  }
}

div[editext='view-container'] {
  background: #6293c3;
  padding: 15px;
  border-radius: 5px;
  color: #fff;
}

div[editext='validation-container'] {
  color: #d3d3d3;
  text-decoration: underline;
}

input,
textarea {
  /** or input[editext="input"] {} */
  background: #1d2225;
  color: #f4c361;
  font-weight: bold;
  border-radius: 5px;
}
```

--------------------------------

### Manage EdiText state externally

Source: https://context7.com/alioguzhan/react-editext/llms.txt

Shows how to control the editing mode programmatically using the editing prop and how to restrict edit access using the canEdit prop. This is useful for implementing complex validation or external UI triggers.

```jsx
import React, { useState } from 'react';
import EdiText from 'react-editext';

function ControlledEditingExample() {
  const [isEditing, setIsEditing] = useState(false);
  const [value, setValue] = useState('Controlled editing example');
  const [isLocked, setIsLocked] = useState(true);

  return (
    <div>
      <EdiText
        type="text"
        value={value}
        editing={isEditing}
        onSave={(val) => {
          setValue(val);
          setIsEditing(false);
        }}
        onCancel={() => setIsEditing(false)}
      />
      <EdiText
        type="text"
        value="This field requires unlock to edit"
        onSave={(val) => console.log('Saved:', val)}
        canEdit={() => {
          if (isLocked) {
            alert('Please unlock editing first!');
            return false;
          }
          return true;
        }}
      />
    </div>
  );
}
```

--------------------------------

### Customize Button Content and Styling

Source: https://context7.com/alioguzhan/react-editext/llms.txt

Shows how to override default button labels, hide icons, apply custom CSS classes, and adjust button alignment within the EdiText component.

```jsx
import React from 'react';
import EdiText from 'react-editext';

function CustomButtonsExample() {
  const handleSave = (val) => console.log('Saved:', val);

  return (
    <div>
      <EdiText
        type="text"
        value="Custom button labels"
        onSave={handleSave}
        editButtonContent="Edit"
        saveButtonContent="Apply"
        cancelButtonContent={<strong>Cancel</strong>}
      />
      <EdiText
        type="text"
        value="Text-only buttons (no icons)"
        onSave={handleSave}
        hideIcons={true}
        editButtonContent="✏️ Edit"
        saveButtonContent="💾 Save"
        cancelButtonContent="❌ Cancel"
      />
      <EdiText
        type="text"
        value="Styled with custom classes"
        onSave={handleSave}
        editButtonClassName="btn btn-primary"
        saveButtonClassName="btn btn-success"
        cancelButtonClassName="btn btn-danger"
        editButtonContent="Edit"
        saveButtonContent="Save"
        cancelButtonContent="Cancel"
      />
      <EdiText
        type="text"
        value="Buttons appear before input"
        onSave={handleSave}
        buttonsAlign="before"
        editButtonContent="Edit"
      />
    </div>
  );
}
```

--------------------------------

### Customize Value Rendering in React EdiText

Source: https://context7.com/alioguzhan/react-editext/llms.txt

Illustrates the use of the `renderValue` prop in React EdiText to transform how values are displayed in view mode. This is useful for formatting data, parsing URLs into clickable links, or truncating long text while maintaining full content on edit.

```jsx
import React from 'react';
import EdiText from 'react-editext';

function RenderValueExample() {
  const handleSave = (val) => console.log('Saved:', val);

  return (
    <div>
      {/* Parse and render URLs as links */}
      <EdiText
        type="text"
        value="Check out https://reactjs.org for more info"
        onSave={handleSave}
        submitOnEnter
        renderValue={(value) => {
          const urlRegex = /(https?://[^\s]+)/g;
          const parts = value.split(urlRegex);
          return (
            <span>
              {parts.map((part, i) =>
                urlRegex.test(part) ? (
                  <a key={i} href={part} target="_blank" rel="noopener noreferrer">
                    {part}
                  </a>
                ) : (
                  part
                )
              )}
            </span>
          );
        }}
      />

      {/* Format currency */}
      <EdiText
        type="number"
        value="1299.99"
        onSave={handleSave}
        renderValue={(value) => (
          <span style={{ color: 'green', fontWeight: 'bold' }}>
            ${parseFloat(value).toLocaleString('en-US', { minimumFractionDigits: 2 })}
          </span>
        )}
      />

      {/* Truncate long text in view mode */}
      <EdiText
        type="text"
        value="This is a very long piece of text that should be truncated in view mode but shown fully when editing"
        onSave={handleSave}
        renderValue={(value) => (
          <span title={value}>
            {value.length > 50 ? value.substring(0, 50) + '...' : value}
          </span>
        )}
      />
    </div>
  );
}

```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.