react-audio-wavekit 0.2.4 → 0.2.6

package/README.md

@@ -38,6 +38,8 @@ Static waveform visualization with playhead and drag-to-seek.
 
 ```tsx
 <AudioWaveform
+  // Also accepts classnames, compatible with tailwind.
+  className=""
   blob={audioBlob}
   currentTime={currentTime}
   duration={duration}
@@ -47,6 +49,11 @@ Static waveform visualization with playhead and drag-to-seek.
     audio.currentTime = time;
     audio.play();
   }}
+  style={{
+    // Or use classNames with Tailwind
+    width: '400px',
+    height: '100px',
+  }}
 />
 ```
 
@@ -63,6 +70,8 @@ Static waveform visualization with playhead and drag-to-seek.
 | `suspense` | `boolean` | `false` | Enable React Suspense mode |
 | `appearance` | `AudioWaveformAppearance` | - | See [Appearance Options](#appearance-options) |
 
+**SSR note:** When `suspense` is `true`, decoding only starts on the client after mount. On the server (and during the first client render), the waveform renders without peaks, so wrap the component in a Suspense boundary to show a fallback during hydration.
+
 ---
 
 ## Recorder
@@ -228,6 +237,11 @@ Components accept `className`, `style`, and all standard canvas HTML attributes.
 <AudioWaveform
   blob={blob}
   className="h-32 w-full rounded-lg bg-slate-900 p-4"
+  // or style prop
+  style={{
+    width: "100%",
+    height: "100%",
+  }}
   appearance={{
     barColor: "#3b82f6",
     barWidth: 2,

package/dist/waveform/index.cjs

@@ -24,9 +24,13 @@ const AudioWaveform = react.forwardRef(function AudioWaveform2({
 }, ref) {
   const [decodedPeaks, setDecodedPeaks] = react.useState(null);
   const [error, setError] = react.useState(null);
+  const [isMounted, setIsMounted] = react.useState(false);
   const blobRef = react.useRef(null);
   const rendererRef = react.useRef(null);
   const sampleCount = react.useMemo(() => getInitialSampleCount(), []);
+  react.useEffect(() => {
+    setIsMounted(true);
+  }, []);
   react.useEffect(() => {
     if (ref && typeof ref === "function") {
       ref({ canvas: rendererRef.current?.canvas || null });
@@ -35,7 +39,7 @@ const AudioWaveform = react.forwardRef(function AudioWaveform2({
     }
   }, [ref]);
   const shouldDecode = !precomputedPeaks && blob;
-  const suspensePeaks = shouldDecode && suspense ? utilSuspense.unwrapPromise(utilAudioDecoder.getAudioData(blob, sampleCount)) : null;
+  const suspensePeaks = shouldDecode && suspense && isMounted ? utilSuspense.unwrapPromise(utilAudioDecoder.getAudioData(blob, sampleCount)) : null;
   react.useEffect(() => {
     if (!shouldDecode || suspense) {
       if (!shouldDecode) {

package/dist/waveform/index.js

@@ -22,9 +22,13 @@ const AudioWaveform = forwardRef(function AudioWaveform2({
 }, ref) {
   const [decodedPeaks, setDecodedPeaks] = useState(null);
   const [error, setError] = useState(null);
+  const [isMounted, setIsMounted] = useState(false);
   const blobRef = useRef(null);
   const rendererRef = useRef(null);
   const sampleCount = useMemo(() => getInitialSampleCount(), []);
+  useEffect(() => {
+    setIsMounted(true);
+  }, []);
   useEffect(() => {
     if (ref && typeof ref === "function") {
       ref({ canvas: rendererRef.current?.canvas || null });
@@ -33,7 +37,7 @@ const AudioWaveform = forwardRef(function AudioWaveform2({
     }
   }, [ref]);
   const shouldDecode = !precomputedPeaks && blob;
-  const suspensePeaks = shouldDecode && suspense ? unwrapPromise(getAudioData(blob, sampleCount)) : null;
+  const suspensePeaks = shouldDecode && suspense && isMounted ? unwrapPromise(getAudioData(blob, sampleCount)) : null;
   useEffect(() => {
     if (!shouldDecode || suspense) {
       if (!shouldDecode) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-audio-wavekit",
-  "version": "0.2.4",
+  "version": "0.2.6",
   "description": "React component library for audio waveform visualization and live recording",
   "license": "CC0-1.0",
   "author": "semanticist21",
@@ -72,7 +72,7 @@
     "@storybook/react": "10.1.4",
     "@storybook/react-vite": "10.1.4",
     "@tailwindcss/vite": "4.1.17",
-    "@testing-library/react": "^16.3.0",
+    "@testing-library/react": "^16.3.1",
     "@types/node": "24.10.1",
     "@types/react": "19.2.7",
     "@types/react-dom": "19.2.3",
@@ -87,7 +87,7 @@
     "typescript": "5.9.3",
     "vite": "7.2.6",
     "vite-plugin-dts": "4.5.4",
-    "vitest": "^4.0.15"
+    "vitest": "^4.0.16"
   },
   "dependencies": {
     "mpg123-decoder": "^1.0.3"