# react-with-forwarded-ref

> React higher-order component (HOC) for ref forwarding

Latest version **1.0.1** (published 2024-06-30) · Unlicense license · 0 weekly downloads

## Install

```sh
npm install react-with-forwarded-ref
pnpm add react-with-forwarded-ref
yarn add react-with-forwarded-ref
bun add react-with-forwarded-ref
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2024-06-30 |
| First published | 2018-12-19 |
| Weekly downloads | 0 |
| License | Unlicense |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 7.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 5 |
| Author | Robert Pearce |
| Keywords | forwardRef, react, react-component, higher-order-component, hoc |

## Links

- npm: https://www.npmjs.com/package/react-with-forwarded-ref
- Repository: https://github.com/rpearce/react-with-forwarded-ref
- Issues: https://github.com/rpearce/react-with-forwarded-ref/issues
- npm.io page: https://npm.io/package/react-with-forwarded-ref

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.0.1 (latest) — 2024-06-30
- 1.0.0 — 2022-05-24
- 0.3.5 — 2022-05-24
- 0.3.4 — 2021-10-28
- 0.3.3 — 2020-12-07
- 0.3.2 — 2020-07-31
- 0.3.1 — 2020-03-14
- 0.3.0 — 2019-12-29
- 0.2.0 — 2019-10-17
- 0.1.0 — 2018-12-19

## README

# react-with-forwarded-ref

[![npm version](https://img.shields.io/npm/v/react-with-forwarded-ref.svg?style=flat-square)](https://www.npmjs.com/package/react-with-forwarded-ref) [![npm downloads](https://img.shields.io/npm/dm/react-with-forwarded-ref.svg?style=flat-square)](https://www.npmjs.com/package/react-with-forwarded-ref) [![bundlephobia size](https://flat.badgen.net/bundlephobia/minzip/react-with-forwarded-ref)](https://bundlephobia.com/result?p=react-with-forwarded-ref) [![All Contributors](https://img.shields.io/badge/all_contributors-2-orange.svg?style=flat-square)](#contributors-)

This React.js [higher-order component
(HOC)](https://reactjs.org/docs/higher-order-components.html) exists to provide
an appropriate wrapper for components that utilize
[forwarded refs](https://reactjs.org/docs/forwarding-refs.html). It accepts a
`ref` via `props` and renames `ref` to `forwardedRef` along
with whatever other `props` are passed in.

## Links
* [Installation](#installation)
* [Usage](#usage)
* [All Contributors](#usage)
* [Authors](./AUTHORS)
* [Changelog](./CHANGELOG.md)
* [Contributing](./CONTRIBUTING.md)
* [Code of Conduct](./CODE_OF_CONDUCT.md)

## Installation
```
npm i react-with-forwarded-ref
```
or
```
yarn add react-with-forwarded-ref
```

## Usage
Let's say you have a react component named `Comp`:

```js
// Comp.js file

const Comp = ({ children, className }) => (
  <div className={className}>
    {children}
  </div>
)

export default Comp
```

If you're using [`React.createRef()`](https://reactjs.org/docs/refs-and-the-dom.html#creating-refs<Paste>)
and want to pass this `ref` to a child component, you need to utilize
[forwarded refs](https://reactjs.org/docs/forwarding-refs.html). This component
handles all the hassle by using the [higher-order component
(HOC)](https://reactjs.org/docs/higher-order-components.html) pattern to wrap
your component, accept the `ref`, and forward it to you as `forwardedRef`.

```js
// Comp.js file

import withForwardedRef from 'react-with-forwarded-ref'

const Comp = ({ children, className, forwardedRef }) => (
  <div className={className} ref={forwardedRef}>
    {children}
  </div>
)

export default withForwardedRef(Comp)
```

## Contributors

Thanks goes to these wonderful people ([emoji key](https://github.com/kentcdodds/all-contributors#emoji-key)):

<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
<!-- prettier-ignore-start -->
<!-- markdownlint-disable -->
<table>
  <tr>
    <td align="center"><a href="https://robertwpearce.com"><img src="https://avatars2.githubusercontent.com/u/592876?v=4" width="100px;" alt=""/><br /><sub><b>Robert Pearce</b></sub></a><br /><a href="https://github.com/rpearce/react-with-forwarded-ref/commits?author=rpearce" title="Code">💻</a> <a href="https://github.com/rpearce/react-with-forwarded-ref/commits?author=rpearce" title="Documentation">📖</a> <a href="#example-rpearce" title="Examples">💡</a> <a href="#ideas-rpearce" title="Ideas, Planning, & Feedback">🤔</a> <a href="https://github.com/rpearce/react-with-forwarded-ref/commits?author=rpearce" title="Tests">⚠️</a></td>
    <td align="center"><a href="https://zuffik.eu"><img src="https://avatars1.githubusercontent.com/u/7671752?v=4" width="100px;" alt=""/><br /><sub><b>Kristián Žuffa</b></sub></a><br /><a href="https://github.com/rpearce/react-with-forwarded-ref/commits?author=zuffik" title="Code">💻</a></td>
  </tr>
</table>

<!-- markdownlint-enable -->
<!-- prettier-ignore-end -->
<!-- ALL-CONTRIBUTORS-LIST:END -->

This project follows the [all-contributors](https://github.com/kentcdodds/all-contributors) specification. Contributions of any kind welcome!

---
_Source: https://npm.io/package/react-with-forwarded-ref · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._