https://github.com/rpearce/react-with-forwarded-ref
React higher-order component (HOC) for ref forwarding
https://github.com/rpearce/react-with-forwarded-ref
forwardref hacktoberfest higher-order-component hoc react react-component
Last synced: 12 months ago
JSON representation
React higher-order component (HOC) for ref forwarding
- Host: GitHub
- URL: https://github.com/rpearce/react-with-forwarded-ref
- Owner: rpearce
- License: unlicense
- Created: 2018-12-19T03:56:33.000Z (over 7 years ago)
- Default Branch: main
- Last Pushed: 2024-06-30T02:54:08.000Z (almost 2 years ago)
- Last Synced: 2025-04-30T17:07:26.539Z (12 months ago)
- Topics: forwardref, hacktoberfest, higher-order-component, hoc, react, react-component
- Language: TypeScript
- Homepage:
- Size: 1.17 MB
- Stars: 5
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# react-with-forwarded-ref
[](https://www.npmjs.com/package/react-with-forwarded-ref) [](https://www.npmjs.com/package/react-with-forwarded-ref) [](https://bundlephobia.com/result?p=react-with-forwarded-ref) [](#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 }) => (
{children}
)
export default Comp
```
If you're using [`React.createRef()`](https://reactjs.org/docs/refs-and-the-dom.html#creating-refs)
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 }) => (
{children}
)
export default withForwardedRef(Comp)
```
## Contributors
Thanks goes to these wonderful people ([emoji key](https://github.com/kentcdodds/all-contributors#emoji-key)):
Robert Pearce
💻 📖 💡 🤔 ⚠️
Kristián Žuffa
💻
This project follows the [all-contributors](https://github.com/kentcdodds/all-contributors) specification. Contributions of any kind welcome!