react-morpheus 0.1.10 → 0.1.11
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +28 -6
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -30,8 +30,9 @@ npm i react-morpheus cuelume
|
|
|
30
30
|
yarn add react-morpheus cuelume
|
|
31
31
|
```
|
|
32
32
|
|
|
33
|
-
Cuelume is a peer dependency
|
|
34
|
-
|
|
33
|
+
[Cuelume](https://github.com/Danilaa1/cuelume) is a required peer dependency;
|
|
34
|
+
sound playback remains opt-in. It synthesizes cues with the Web Audio API, so
|
|
35
|
+
React Morpheus does not bundle audio files.
|
|
35
36
|
|
|
36
37
|
## Usage
|
|
37
38
|
|
|
@@ -88,6 +89,31 @@ the source component's own click handler. Overlay clicks call `onClose`; update
|
|
|
88
89
|
your controlled state there. Use `beforeClose` and `afterClose` for work that
|
|
89
90
|
should run around the closing animation.
|
|
90
91
|
|
|
92
|
+
## Sounds
|
|
93
|
+
|
|
94
|
+
Use `openSound` and `closeSound` to add Cuelume cues to the controlled state
|
|
95
|
+
transition. React Morpheus calls Cuelume directly; you do not need to call
|
|
96
|
+
`bind()` or `play()` yourself.
|
|
97
|
+
|
|
98
|
+
```tsx
|
|
99
|
+
<Morpheus
|
|
100
|
+
expanded={expanded}
|
|
101
|
+
openSound="bloom"
|
|
102
|
+
closeSound="droplet"
|
|
103
|
+
// ...the remaining props
|
|
104
|
+
/>
|
|
105
|
+
```
|
|
106
|
+
|
|
107
|
+
Each configured cue plays once when `expanded` changes. The initial render is
|
|
108
|
+
silent, including when `expanded` is initially `true`. Omit either prop to keep
|
|
109
|
+
that direction silent.
|
|
110
|
+
|
|
111
|
+
Both props accept Cuelume's `SoundName` values:
|
|
112
|
+
|
|
113
|
+
`arrival`, `bloom`, `chime`, `droplet`, `error`, `loading`, `page`, `press`,
|
|
114
|
+
`pulse`, `ready`, `release`, `scan`, `sparkle`, `success`, `tick`, `toggle`, and
|
|
115
|
+
`whisper`.
|
|
116
|
+
|
|
91
117
|
## Props
|
|
92
118
|
|
|
93
119
|
| Prop | Type | Required | Notes |
|
|
@@ -111,10 +137,6 @@ should run around the closing animation.
|
|
|
111
137
|
| `overlayZIndex` | `number` | Optional | Stacking level for the expanded surface. Defaults to `1000`; the overlay renders one layer below it. |
|
|
112
138
|
| `spring` | `Transition` | Optional | Framer Motion transition. Pass your own transition or use `morphSpringPresets`. |
|
|
113
139
|
|
|
114
|
-
Sound is opt-in. Both props accept any Cuelume sound name, including `bloom`,
|
|
115
|
-
`droplet`, `toggle`, `release`, and `whisper`. Omitting a prop keeps that
|
|
116
|
-
transition silent.
|
|
117
|
-
|
|
118
140
|
## Pitfalls
|
|
119
141
|
|
|
120
142
|
### Responsiveness
|