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.

useSetAppHeight

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 👋
    </div>
  );
}

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.

Parameters:

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.	[]

Returns:

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.

Usage:

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

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

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.

↑Back to top

Help Scout Developers

useSetAppHeight