TypeScript icon, indicating that this package has built-in type declarations

    0.6.0 • Public • Published


    An opinionated React wrapper for howler.js


    Rehowl has react and howler as peer dependencies so that you can manage your own versions.

    npm install --save-dev howler rehowl
    yarn add -D howler rehowl

    Documentation and Live Examples

    Documentation and live examples are available at

    The source of these examples is ./stories

    Quick start

    It's recommended to view the examples.

    However, at its core Rehowl works by using useHowl or <Howl /> to get a howl instance, then playing sounds off that instance with one or more <Play /> components:

    import { useHowl, Play } from 'rehowl'
    import bark from './assets/bark.mp3'
    const Autoplay = () => {
      const { howl, state } = useHowl({ src: bark })
      return (
        <Play howl={howl} />

    See the docs for examples on how to play multiple sounds off of one howl, how to use audio sprites, and how to control volume, seek, etc.


    When deciding to use Howler in a React project, a quick Google Search brings you to react-howler.

    There are a few issues that make ReactHowler unsuitable for my needs:

    • No support for playing multiple sounds on one Howl instance
    • No support for audio sprites
    • If you want to do more than the very basic API, you must break out the howler instance using refs
    • Use of componentWillReceiveProps

    Overall, it feels much more like a barebones wrapper for Howler that doesn't really give you any help when trying to integrate it into your components.

    My main goals in this project are to make a library that feels like Howler, if Howler were built for React.


    npm i rehowl

    DownloadsWeekly Downloads






    Unpacked Size

    24.6 kB

    Total Files


    Last publish


    • morinted