diff --git a/README.md b/README.md index 0b8afed..a4ab6aa 100644 --- a/README.md +++ b/README.md @@ -29,26 +29,27 @@ function App() { ## 🔧 Props -| Prop | Type | Default | Description | -| -------------------- | ----------------------- | -------------- | ------------------------------------ | -| value | string | "" | Text to display and edit | -| isEditing | boolean | false | Initial editing state | -| inputType | string | "text" | Type of input field | -| label | string | "" | Label for the input | -| className | string | "" | Container class name | -| inputClassName | string | "" | Input field class name | -| editButtonClassName | string | "" | Edit button class name | -| saveButtonClassName | string | "" | Save button class name | -| editWrapperClassName | string | "" | Edit mode wrapper class name | -| saveButtonLabel | React.ReactNode | "Save" | Custom save button label | -| editButtonLabel | React.ReactNode | "Edit" | Custom edit button label | -| showIcons | boolean | false | Show icons in buttons | -| editIcon | React.ReactNode | `` | Custom edit icon | -| saveIcon | React.ReactNode | `` | Custom save icon | -| iconPosition | "left" \| "right" | "left" | Position of icons in buttons | -| onEditButtonClick | () => void | () => {} | Callback when edit button is clicked | -| onInputChange | (value: string) => void | () => {} | Callback when input value changes | -| onSaveButtonClick | () => void | () => {} | Callback when save button is clicked | +| Prop | Type | Default | Description | +| -------------------- | ----------------------- | -------------- | ------------------------------------- | +| value | string | "" | Text to display and edit | +| isEditing | boolean | false | Initial editing state | +| inputType | string | "text" | Type of input field | +| label | string | "" | Label for the input | +| className | string | "" | Container class name | +| inputClassName | string | "" | Input field class name | +| editButtonClassName | string | "" | Edit button class name | +| saveButtonClassName | string | "" | Save button class name | +| editWrapperClassName | string | "" | Edit mode wrapper class name | +| saveButtonLabel | React.ReactNode | "Save" | Custom save button label | +| editButtonLabel | React.ReactNode | "Edit" | Custom edit button label | +| showIcons | boolean | false | Show icons in buttons | +| editIcon | React.ReactNode | `` | Custom edit icon | +| saveIcon | React.ReactNode | `` | Custom save icon | +| iconPosition | "left" \| "right" | "left" | Position of icons in buttons | +| onEditButtonClick | () => void | () => {} | Callback when edit button is clicked | +| onInputChange | (value: string) => void | () => {} | Callback when input value changes | +| onSaveButtonClick | () => void | () => {} | Callback when save button is clicked | +| iconsOnly | boolean | false | Show only icons without button labels | ## 💡 Examples @@ -81,6 +82,17 @@ function App() { /> ``` +### Icons Only (No Text Labels) + +```tsx +✎} + saveIcon={✓} +/> +``` + ## 📄 License MIT diff --git a/playground/src/App.tsx b/playground/src/App.tsx index b9792ee..77f93e0 100644 --- a/playground/src/App.tsx +++ b/playground/src/App.tsx @@ -22,6 +22,8 @@ function App() {

Vite + React

+
+

Edit src/App.tsx and save to test HMR

diff --git a/src/InputClickEdit/InputClickEdit.tsx b/src/InputClickEdit/InputClickEdit.tsx index 971c612..b51c42e 100644 --- a/src/InputClickEdit/InputClickEdit.tsx +++ b/src/InputClickEdit/InputClickEdit.tsx @@ -21,6 +21,7 @@ type InputClickEditProps = { editIcon?: React.ReactNode; saveIcon?: React.ReactNode; iconPosition?: "left" | "right"; + iconsOnly?: boolean; onEditButtonClick?: () => void; onInputChange?: (value: string) => void; onSaveButtonClick?: () => void; @@ -41,6 +42,7 @@ const InputClickEdit = ({ showIcons = false, saveIcon = , editIcon = , + iconsOnly = false, iconPosition = "left", onEditButtonClick = () => {}, onInputChange = () => {}, @@ -87,9 +89,10 @@ const InputClickEdit = ({
) : ( @@ -98,9 +101,10 @@ const InputClickEdit = ({ )}