Issue with Status Typing

[samp6]

Hello there,

I'm having an issue with the typing of the playStatus; it's possible something is wrong on my end, but I followed other examples almost exactly and haven't seen any other mention of this. I am on Windows using VSCode and downloaded the package through npm.

I'm trying to make a function component in typescript that uses the Sound component. When I try to set status (Sound.status.STOPPED), my compiler is complaining:

Property 'status' does not exist on type 'ComponentClass<ReactSoundProps, any>'.

I'm very confused as Googling has not shown me anyone else having this issue. I briefly attempted using PlayStatus.Stopped instead (as the ctrl+click decompiled index file showed this), but instead of the type error I got a WebPack error.

I'm not sure on whose end this issue is, maybe the component doesn't work with function components?

I've attached my component's file in question.

Thank you

Note.tsx.txt

[samp6]

Had an idea immediately after writing this: I changed the file to plain js rather than ts. It compiled without issue; this must be an issue with this component and ts.

[PABlond]

I am facing the same issue : Property 'status' does not exist on type 'ComponentClass<ReactSoundProps, any>' playStatus={status ? Sound.status.PLAYING : Sound.status.PAUSED}

[PABlond]

I tried several things : I think in nodes_modules/@types/react-sound/index.d.ts, something like this is missing (it resolves this error but I don't really know if it is a good practise):

interface Status { status: any }

declare const ReactSound: React.ComponentClass<ReactSoundProps> & Status

[kieran-osgood]

I don't suppose there was ever a fix/work around for this? I've just run into this issue in v1.2.2 (typescript 3.7.2)

[tmountain]

I solved this as follows.

import React, { useState } from 'react';
import Sound, { ReactSoundProps } from 'react-sound';
import './App.css';

function App() {
  const [status, setStatus] = useState<ReactSoundProps['playStatus']>('STOPPED');

  function togglePlayStatus() {
    setStatus(status => status === 'STOPPED' ? 'PLAYING' : 'STOPPED')
  }

  function statusLabel(status: ReactSoundProps['playStatus']): string {
    switch(status) {
      case 'STOPPED':
        return 'PLAY';
      case 'PLAYING':
        return 'STOP';
      default:
        return 'STOP';
    }
  }

  return (
    <div className="App">
      <button onClick={(click) => togglePlayStatus()}>{statusLabel(status)}</button>
      <Sound
        url="https://www.learningcontainer.com/wp-content/uploads/2020/02/Kalimba.mp3"
        playStatus={status}
      />
    </div>
  );
}

export default App;