Feat/autofocus

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                           |

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<ContentEditableProps> = ({
   disabled,
   updatedContent,
   maxLength,
+  autoFocus,
   onChange,
   onKeyUp,
   onKeyDown,
@@ -62,6 +64,12 @@ const ContentEditable: React.FC<ContentEditableProps> = ({
     }
   }, [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

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",

src/App.tsx

@@ -46,6 +46,7 @@ const App = () => {
         updatedContent={emptyContent}
         onChange={(content) => setContent(content)}
         maxLength={100}
+        autoFocus
         onFocus={() => {
           setIsFocused(true)
           setIsBlurred(false)