UI Kit Hooks

Hooks are a powerful feature in React that allow you to use state and other React features without having to write a class. They simplify your component logic and make your code easier to understand and maintain. Our UI Kit currently utilizes one custom hook to provide a convenient function to your apps.


The useSetAppHeight hook dynamically adjusts the height of the sidebar app based on its content. This hook is especially useful when the content changes dynamically, causing the height of the app’s container to also change.

Here’s how to use useSetAppHeight:

import { useSetAppHeight } from "@helpscout/ui-kit";

function App() {
  const appRef = useSetAppHeight();

  return (
    <div className="App" ref={appRef}>
      Hey there 👋

export default App;

In the example above, the useSetAppHeight hook is invoked without any arguments, so it will use default values for its parameters. You can pass an object to useSetAppHeight to customize its behavior.


Parameter Type Description Default
defaultHeight number The default height (in pixels) to be used when the appRef does not reference a valid HTML element. 300
effectDependencies unknown[] An array of dependencies that will trigger the hook to run again. Any changes to these values will cause the effect to rerun. If your component’s height depends on some state or prop, include that state or prop in this array. []


Return Type Description
appRef React.RefObject A mutable ref object to be attached to a DOM element after render. Its .current property is initialized to null and updated to reference the DOM element.


const appRef = useSetAppHeight({
  defaultHeight: 500,
  effectDependencies: [someState, someProp],

return (
  <div className="App" ref={appRef}>
    My awesome app ✨

In this case, the appRef is given to a div’s ref prop. When the div is rendered, appRef.current will point to the div, allowing the hook to adjust its height based on its content.