docs: update docs

README.md

@@ -1,3 +1,49 @@
 # use-controlled
 
-Easily manage controlled/uncontrolled property values of your components.
+🆒 Easily manage controlled/uncontrolled property values of your components.
+
+<br />
+<div align="center">
+<pre>pnpm add use-controlled</pre>
+</div>
+<br />
+<br />
+
+## Usage
+
+```ts
+import * as React from 'react'
+import { useControlled } from 'use-controlled'
+
+type InputValue = string | number
+
+interface InputProps {
+  defaultValue: InputValue
+  value: InputValue
+  onChange: (value: InputValue, event?: React.ChangeEvent<HTMLInputElement>) => void
+  // ...other properties
+}
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>((props, ref) => {
+
+  const [innerValue, setInnerValue] = useControlled(props, 'value', props.onChange)
+
+  const handleChange = React.useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>) => {
+      setInnerValue(event.target.value, event)
+    },
+    [],
+  )
+
+  return (
+    <input
+      ref={ref}
+      value={innerValue || props.defaultValue}
+      onChange={handleChange}
+    />
+  )
+})
+
+export default Input
+
+```

packages/index.ts

@@ -7,7 +7,7 @@ export interface ChangeHandler<T, A extends any[]> {
 
 const noop = () => {}
 
-const useControlled = <T, A extends any[]>(
+export const useControlled = <T, A extends any[]>(
   props: Record<string, any> = {},
   valueKey: string,
   onChange: ChangeHandler<T, A>
@@ -26,6 +26,4 @@ const useControlled = <T, A extends any[]>(
       onChange?.(newValue, ...args)
     },
   ]
-}
-
-export default useControlled
+}