InlineInput

The InlineInput component provides an editable text input field that can toggle between read-only and edit modes. It's designed to be used inline with other UI elements, allowing users to quickly edit values and save or cancel their changes. The component supports icons for editing, confirming, and canceling actions, making the user experience intuitive and efficient.

Props

• placeholder (string): Placeholder text displayed in the input field when it's empty, Default: 'Enter value'
• className (string): Additional CSS class names to apply to the component's wrapper, Default: ''
• icon (string): The icon name to display alongside the input field. Typically used for a contextual symbol like a user or a pencil icon, Default: ''
• iconType (string): The type of icon to display, such as 'line' or 'solid', Default: 'line'
• value (string): The initial value of the input field, Default: ''
• onSave (function): Callback function triggered when the user saves the input value. The new value is passed as an argument, Default: () =>
• state (string): Represents the state of the input field. It can be 'default', 'disabled', or other custom states. If set to 'disabled', the input field becomes read-only and cannot be edited, Default: 'default'

Usage Example:

import InlineInput from './InlineInput';

function Example() {
   const handleSave = (newValue) => {
       console.log('Value saved:', newValue);
   };

   return (
       <div>
           <InlineInput
               placeholder="Enter your name"
               icon="user"
               iconType="line"
               value="John Doe"
               onSave={handleSave}
               state="default"
           />
       </div>
   );
}