This package has been deprecated

Author message:

Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

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

1.0.8 • Public • Published

useLifecycleRef

npm npm bundle size codecov Test

Like useRef, but with lifecycle and ref merging support

Quick Look

Here is a simplfied demonstration on how easy to use useLifecycleRef.

import React, { type ForwardedRef, type Ref, forwardRef } from 'react';
import useLifecycleRef from 'use-lifecycle-ref';

export function ComponentHidingRef({ id }: { id: string }) {
  const ref = useLifecycleRef<HTMLDivElement>({
    onAttach: (el: HTMLDivElement) => {
      console.log(`${el} attached`);
    },
    onDetach: (el: HTMLDivElement) => {
      console.log(`${el} detached`);
    }
  });
  return <div id={id} ref={ref}>Hello World</div>;
};

export const ComponentExposingRef = forwardRef(function HelloWorld(
  { id }: { id: string },
  ref: ForwardedRef<HTMLDivElement>
) {
  const _ref = useLifecycleRef<HTMLDivElement>({
    onAttach: (el: HTMLDivElement) => {
      console.log(`${el} attached`);
    },
    onDetach: (el: HTMLDivElement) => {
      console.log(`${el} detached`);
    },
    ref
  });
  return <div id={id} ref={_ref}>Hello World</div>;
});

Support

This library has been continuously used in many of my personal projects, and is regarded as production-ready. In the foreseeable future, I will continuously maintain and support this library.

Issues and Feedback

Please voice your opinion and report bugs in the issues sections of this GitHub project.

Contributing

You are more than welcome to add more functionalities, improve documentation, fix bugs, and anything you think is needed. The build step is pretty self-explanatory. Please refer to package.json.

License

MIT

Package Sidebar

Install

npm i use-lifecycle-ref

Weekly Downloads

0

Version

1.0.8

License

MIT

Unpacked Size

10.9 kB

Total Files

9

Last publish

Collaborators

  • billykwok