diff --git a/README.md b/README.md index 1c799c7..6feaa14 100644 --- a/README.md +++ b/README.md @@ -60,6 +60,7 @@ export default App | placeholder | ✔️ | `string` | Input placeholder text | | disabled | ✔️ | `boolean` | Flag that disables the input element | | maxLength | ✔️ | `number` | Indicates the maximum number of characters a user can enter | +| autoFocus | ✔️ | `boolean` | Flag to automatically focus the input element on mount | | updatedContent | ✔️ | `string` | Text injected from parent element into the input as the current value | | onContentExternalUpdate | ✔️ | `(content) => void` | Method that emits the injected content by the `updatedContent` prop | | onChange | ✔️ | `(content) => void` | Method that emits the current content as a string | diff --git a/lib/ContentEditable.tsx b/lib/ContentEditable.tsx index 4a8d1c5..2d77172 100644 --- a/lib/ContentEditable.tsx +++ b/lib/ContentEditable.tsx @@ -9,6 +9,7 @@ interface ContentEditableProps { disabled?: boolean updatedContent?: string maxLength?: number + autoFocus?: boolean onChange?: (content: string) => void onKeyUp?: (e: React.KeyboardEvent) => void onKeyDown?: (e: React.KeyboardEvent) => void @@ -35,6 +36,7 @@ const ContentEditable: React.FC = ({ disabled, updatedContent, maxLength, + autoFocus, onChange, onKeyUp, onKeyDown, @@ -62,6 +64,12 @@ const ContentEditable: React.FC = ({ } }, [content, onChange, maxLength]) + useEffect(() => { + if (divRef.current && autoFocus) { + divRef.current.focus() + } + }, [autoFocus]) + /** * Checks if the caret is on the last line of a contenteditable element * @param element - The HTMLDivElement to check diff --git a/package.json b/package.json index 1e7866c..af5762e 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "react-basic-contenteditable", "description": "React contenteditable component. Super-customizable!", - "version": "1.0.4", + "version": "1.0.5", "type": "module", "main": "dist/main.js", "types": "dist/main.d.ts", diff --git a/src/App.tsx b/src/App.tsx index 8ad5e4e..e0c9abb 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -46,6 +46,7 @@ const App = () => { updatedContent={emptyContent} onChange={(content) => setContent(content)} maxLength={100} + autoFocus onFocus={() => { setIsFocused(true) setIsBlurred(false)