Skip to content

Commit 8240260

Browse files
committed
docs: tweak readme
1 parent e821100 commit 8240260

File tree

1 file changed

+31
-20
lines changed

1 file changed

+31
-20
lines changed

README.md

Lines changed: 31 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
[![npm][version-badge]][version]
44
[![MIT License][license-badge]][license]
55

6-
Helpers that let you observe [Animated][animated] and [Reanimated][reanimated] values and convert between them using native events.
6+
Helpers that let you observe [Animated][animated] and [Reanimated][reanimated] values and convert between them.
77

88
## Use case
99

@@ -23,19 +23,7 @@ The library exports the following components:
2323

2424
A component that converts between an [`Animated.Node`][animated.node] and a [`SharedValue<number>`][reanimated.sharedvalue] natively.
2525

26-
It accepts the following props:
27-
28-
- `from`: Value to read and observe changes from.
29-
30-
[`Animated.Node`][animated.node] - [`Animated.Value`][animated.value] or result of modifications such as interpolation (`Animated.AnimatedInterpolation`), addition (`Animated.AnimatedAddition`), etc.
31-
32-
[`SharedValue<number>`][reanimated.sharedvalue] or [`DerivedValue<number>`][reanimated.derivedvalue]
33-
34-
- `to`: Value to update when the `from` value changes.
35-
36-
[`Animated.Value`][animated.value] or [`SharedValue<number>`][reanimated.sharedvalue]
37-
38-
Usage:
26+
**Usage:**
3927

4028
```js
4129
import { AnimatedConverter } from 'react-native-animated-observer';
@@ -49,16 +37,27 @@ const reanimatedSharedValue = useSharedValue(0);
4937
<AnimatedConverter from={animatedValue} to={reanimatedSharedValue} />;
5038
```
5139

52-
### `AnimatedObserver`
40+
It accepts the following props:
5341

54-
A component that observes changes in a given value and emits an event when the value changes. This is the building block for `AnimatedConverter`.
42+
#### `from`
5543

56-
It accepts the following props:
44+
Value to read and observe changes from. It can be one of the following:
45+
46+
- [`Animated.Node`][animated.node] - [`Animated.Value`][animated.value] or result of modifications such as interpolation (`Animated.AnimatedInterpolation`), addition (`Animated.AnimatedAddition`), etc.
47+
- [`SharedValue<number>`][reanimated.sharedvalue] or [`DerivedValue<number>`][reanimated.derivedvalue]
48+
49+
#### `to`
5750

58-
- `value`: The value to observe. It can be a `number`, [`Animated.Node`][animated.node] for [Animated][animated], [`SharedValue<number>`][reanimated.sharedvalue] or [`DerivedValue<number>`][reanimated.derivedvalue] for [Reanimated][reanimated].
59-
- `onValueChange`: A callback function that is called when the observed value changes.
51+
Value to update when the [`from`](#from) value changes. It can be one of the following:
6052

61-
Usage:
53+
- [`Animated.Value`][animated.value]
54+
- [`SharedValue<number>`][reanimated.sharedvalue]
55+
56+
### `AnimatedObserver`
57+
58+
A component that observes changes in a given value and emits an event when the value changes. This is the building block for `AnimatedConverter`.
59+
60+
**Usage:**
6261

6362
```js
6463
import { AnimatedObserver } from 'react-native-animated-observer';
@@ -75,6 +74,18 @@ const animatedValue = useRef(new Animated.Value(0)).current;
7574
/>;
7675
```
7776

77+
It accepts the following props:
78+
79+
#### `value`
80+
81+
The value to observe.
82+
83+
It can be a `number`, [`Animated.Node`][animated.node] for [Animated][animated], [`SharedValue<number>`][reanimated.sharedvalue] or [`DerivedValue<number>`][reanimated.derivedvalue] for [Reanimated][reanimated].
84+
85+
#### `onValueChange`
86+
87+
A callback function that is called when the observed value changes.
88+
7889
## How it works
7990

8091
The library renders a native component that receives an [`Animated.Node`][animated.node] or [`SharedValue<number>`][reanimated.sharedvalue] value. When the value changes, the library dispatches an event with this value.

0 commit comments

Comments
 (0)