Additional Option Support about wavesurfer-react HOT 12 CLOSED

Maybe we can just spread the props so we can account for any prop that the original wavesurfer.js adds

from wavesurfer-react.

@teophilus, first of all, thanks for the contribution and your wish to help. I saw your changes and I think that props spreading is very risky, because we would have to guarantee that no unwanted props would go into waveForm options with ...props.

For example, we implemented some feature A, that would need some prop A, but we accidentally forgot to ignore it inside render method, thus it would go into waveForm options with ...props.

I would prefer not to use ...props until it is really necessary.

from wavesurfer-react.

From my point of view, rounded-bars should be described as an additionally available prop. However, there're lots of options that waveform accepts, you can describe them all if you wish. It would be very descriptive for others.

Obviously I have an idea of adding either Flow or TypeScript.

from wavesurfer-react.

Hey! Thanks for getting back to me.
I agree ...props isn't always the best solution so I'll make a new PR taking your considerations in mind give me a couple of hours.

from wavesurfer-react.

Quick question would you be open to to using prop-types?
https://reactjs.org/docs/typechecking-with-proptypes.html

from wavesurfer-react.

Quick question would you be open to to using prop-types?
https://reactjs.org/docs/typechecking-with-proptypes.html

It's ok. If someday I would move to TS, I will handle it.

from wavesurfer-react.

As soon as your first attempt failed, can you write down all the waveform options we can pass?

from wavesurfer-react.

@teophilus, I think we should just describe options without setting default values to all of them because for the clear start, the only id is required.

from wavesurfer-react.

@teophilus, I think we should just describe options without setting default values to all of them because for the clear start, the only id is required.

I think you might be right! I was getting too many error with my attempt at defaults and type safety.

P.S. Here is the list of options for safe keeping:

            audioRate,
            audioContext,
            audioScriptProcessor,
            autoCenter,
            backend,
            backgroundColor,
            barGap,
            barHeight,
            barRadius,
            barWidth,
            closeAudioContext,
            container,
            cursorColor,
            cursorWidth,
            fillParent,
            forceDecode,
            height,
            hideScrollbar,
            interact,
            loopSelection,
            maxCanvasWidth,
            mediaControls,
            mediaType,
            minPxPerSec,
            normalize,
            partialRender,
            pixelRatio,
            plugins,
            progressColor,
            removeMediaElementOnDestroy,
            renderer,
            responsive,
            scrollParent,
            skipLength,
            splitChannels,
            waveColor,
            xhr,

from wavesurfer-react.

@teophilus, package has been updated to 1.1.0 with that feature aboard. You can now pass additional options the following way:

<WaveForm
       progressColor="red"
       barWidth={3}
       barRadius={3}
       barGap={3}
       cursorWidth={1}
       height={200}
>
    {regions.map(regionProps => (
        <Region
            onUpdateEnd={console.log}
            key={regionProps.id}
            {...regionProps}
        />
    ))}
/WaveForm>

About typings, most possibly I will use TypeScript as soon as my IDE works great with it.

from wavesurfer-react.

@teophilus, package has been updated to 1.1.0 with that feature aboard. You can now pass additional options the following way:

<WaveForm
       progressColor="red"
       barWidth={3}
       barRadius={3}
       barGap={3}
       cursorWidth={1}
       height={200}
>
    {regions.map(regionProps => (
        <Region
            onUpdateEnd={console.log}
            key={regionProps.id}
            {...regionProps}
        />
    ))}
/WaveForm>

About typings, most possibly I will use TypeScript as soon as my IDE works great with it.

Awesome! I really appreciate it!

from wavesurfer-react.

@ShiiRochi any updates on getting TypeScript types?

from wavesurfer-react.