Hiyve Components - v1.0.0
    Preparing search index...

    Function GainControl

    • GainControl provides a slider for adjusting audio gain/volume with mute.

      Parameters

      Returns ReactElement

      The rendered GainControl component

      The GainControl component combines a slider with a mute button and optional value display. The volume icon changes dynamically based on the current level.

      Key Features:

      • Slider control: Adjusts gain from 0-200% (configurable range)
      • Mute button: One-click mute with volume icon that changes by level
      • Value display: Shows current percentage
      • Orientation: Horizontal or vertical layout
      • Mute memory: Remembers previous volume when unmuting
      • Full customization: Labels (i18n), icons, and styles

      Volume Icon States:

      • volumeOff: When muted (value = 0)
      • volumeMute: Below lowVolumeThreshold
      • volumeDown: Between low and medium thresholds
      • volumeUp: Above mediumVolumeThreshold

      Basic microphone gain control:

      import { GainControl } from '@hiyve/react-ui';

      function MicrophoneGain() {
        const [gain, setGain] = useState(100);

        const handleGainChange = (value: number) => {
          setGain(value);
          // Apply gain to audio processing
          audioProcessor.setGain(value / 100);
        };

        return (
          <GainControl
            value={gain}
            onChange={handleGainChange}
            label="Microphone"
            min={0}
            max={200}
          />
        );
      }

      Vertical gain control:

      import { GainControl } from '@hiyve/react-ui';

      function VerticalVolume() {
        const [volume, setVolume] = useState(100);

        return (
          <GainControl
            value={volume}
            onChange={setVolume}
            orientation="vertical"
            size={150}
            showValue
            showMuteButton
          />
        );
      }

      With custom labels for internationalization:

      import { GainControl, defaultGainControlLabels } from '@hiyve/react-ui';

      function GermanGainControl() {
        const [value, setValue] = useState(100);

        return (
          <GainControl
            value={value}
            onChange={setValue}
            labels={{
              mute: 'Stummschalten',
              unmute: 'Stummschaltung aufheben',
              formatValue: (v) => `${Math.round(v)} %`,
            }}
          />
        );
      }

      With custom icons and styles:

      import { GainControl } from '@hiyve/react-ui';
      import { FaVolumeMute, FaVolumeOff, FaVolumeDown, FaVolumeUp } from 'react-icons/fa';

      function CustomGainControl() {
        const [value, setValue] = useState(100);

        return (
          <GainControl
            value={value}
            onChange={setValue}
            icons={{
              volumeOff: <FaVolumeOff />,
              volumeMute: <FaVolumeMute />,
              volumeDown: <FaVolumeDown />,
              volumeUp: <FaVolumeUp />,
            }}
            styles={{
              thumbSize: 20,
              lowVolumeThreshold: 25,
              mediumVolumeThreshold: 60,
            }}
          />
        );
      }

    Settings

    Member Visibility