Skip to content

Commit aa475b8

Browse files
committed
docs: adding docs for the usePropChanged hook
1 parent 9394d75 commit aa475b8

File tree

1 file changed

+6
-2
lines changed

1 file changed

+6
-2
lines changed

README.md

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,9 @@ Lit Functional Components aims to provide a simple wrapper around Lit components
1212
## Usage
1313

1414
### Component and props
15-
The useProp function is similar to useState in React. In Lit, properties and attributes are used, eliminating the need for a separate useState. Instead, define Lit properties, and whenever a property changes, the component re-renders. The type of the properties is inferred from the type argument.
15+
The `useProp` function is similar to `useState` in React. In Lit, properties and attributes are used, eliminating the need for a separate `useState`. Instead, define Lit properties, and whenever a property changes, the component re-renders. The type of the properties is inferred from the type argument.
16+
17+
If you would like to react on property change, you can either use `updated` or `usePropChanged` hook. It's very similar to `useEffect`, you should provide a callback and the list of dependencies in string format.
1618

1719
The component function creates a custom web component, with the name generated from the function name.
1820

@@ -24,10 +26,12 @@ import component, { Props } from "../../src";
2426

2527
const style = css``
2628

27-
function myElement({ useProp }: Props) {
29+
function myElement({ useProp, usePropChanged }: Props) {
2830
const [count, setCount] = useProp('count', {type: Number}, 0);
2931
const [docs, _] = useProp('docs', {type: String}, 'This is some test docs');
3032

33+
usePropChanged(() => { console.log('count value changed')}, ['count']);
34+
3135
return html`
3236
<div>
3337
<a href="https://vitejs.dev" target="_blank">

0 commit comments

Comments
 (0)