Idea: Context provider for global sound enabling/disabling

[Gvozd]

For use like this

<SoundEnablingProvider enabled={true|false}>
  <ComponentWithSound />
</SoundEnablingProvider>

[joshwcomeau]

In fact, this is exactly what I do in my personal app! I have a ConfigContext which manages this, and then I built a very thin wrapper hook around use-sound:

import React from 'react';
import useSoundBase from 'use-sound';

import { ConfigContext } from '@components/ConfigContext';

export default function useSound(url, delegated) {
  const { soundEnabled } = React.useContext(ConfigContext);

  return useSoundBase(url, { ...delegated, soundEnabled });
}

I think this is best solved in user-land, since that way you can tie it into whatever state-management solution you already use.

[mutheusalmeida]

In fact, this is exactly what I do in my personal app! I have a ConfigContext which manages this, and then I built a very thin wrapper hook around use-sound:

import React from 'react';
import useSoundBase from 'use-sound';

import { ConfigContext } from '@components/ConfigContext';

export default function useSound(url, delegated) {
  const { soundEnabled } = React.useContext(ConfigContext);

  return useSoundBase(url, { ...delegated, soundEnabled });
}

I think this is best solved in user-land, since that way you can tie it into whatever state-management solution you already use.

I could not make this work with Jotai. I would love to have this feature in my app.