No Preview

Sorry, but you either have no stories or none are selected somehow.

If the problem persists, check the browser console, or the terminal you've run Storybook from.

The component failed to render properly, likely due to a configuration issue in Storybook. Here are some common causes and how you can address them:

  1. Missing Context/Providers: You can use decorators to supply specific contexts or providers, which are sometimes necessary for components to render correctly. For detailed instructions on using decorators, please visit the Decorators documentation.
  2. Misconfigured Webpack or Vite: Verify that Storybook picks up all necessary settings for loaders, plugins, and other relevant parameters. You can find step-by-step guides for configuring Webpack or Vite with Storybook.
  3. Missing Environment Variables: Your Storybook may require specific environment variables to function as intended. You can set up custom environment variables as outlined in the Environment Variables documentation.

useForwardedRef

Use case

Used to provide a safe ref to use when working with a forwardRef. The ref Object provided from useForwardedRef is stateful or in otherwords, will trigger a rerender when the current property changes.

How to install

npm install @bedrock-layout/use-forwarded-ref

Basic usage

import { useForwardedRef } from '@bedrock-layout/use-forwarded-ref';

const ForwardedRefDiv = React.forwardRef((props,ref)=>{
    const innerRef = useForwardedRef(ref)
    // do something with innerRef
    return <div ref={innerRef} {...props}>
})

Then in your app you would use it like this:

const App = () => {
  const ref = React.useRef(null);
  console.log(ref.current);
  return <ForwardedRefDiv ref={ref}>{...content}</ForwardedRefDiv>;
};

Config

useForwardedRef accepts a single config object as a second argument. The config object can have the following properties: isStateful. isStateful is a boolean that determines if the ref is stateful or not.

If isStateful is true, the ref will trigger a rerender when the current property changes. If isStateful is false, the ref will not trigger a rerender when the current property changes.

The default value is true.

For example:

import { useForwardedRef } from '@bedrock-layout/use-forwarded-ref';

const ForwardedRefDiv = React.forwardRef((props,ref)=>{
    const innerRef = useForwardedRef(ref, {isStateful: false})
    // innerRef will not trigger a rerender when the `current` property changes
    return <div ref={innerRef} {...props}>
})