# react-clone-referenced-element

> Clones a React element while preserving its original ref

Latest version **1.1.1** (published 2021-05-09) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-clone-referenced-element
pnpm add react-clone-referenced-element
yarn add react-clone-referenced-element
bun add react-clone-referenced-element
```

## Health

**Score 35/100 (D)** — status: abandoned.

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

Warnings: low downloads; no esm support.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 1.1.1 |
| Published | 2021-05-09 |
| First published | 2016-01-14 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 4.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 40 |
| Author | James Ide |
| Maintainers | ide |
| Keywords | react, clone, element |

## Links

- npm: https://www.npmjs.com/package/react-clone-referenced-element
- Repository: https://github.com/ide/react-clone-referenced-element
- Homepage: https://github.com/ide/react-clone-referenced-element#readme
- Issues: https://github.com/ide/react-clone-referenced-element/issues
- npm.io page: https://npm.io/package/react-clone-referenced-element

## 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.1.1 (latest) — 2021-05-09
- 1.1.0 — 2018-09-12
- 1.0.1 — 2016-01-19
- 1.0.0 — 2016-01-14

## README

# cloneReferencedElement for React [![Tests](https://github.com/ide/react-clone-referenced-element/actions/workflows/tests.yaml/badge.svg)](https://github.com/ide/react-clone-referenced-element/actions/workflows/tests.yaml) [![codecov](https://codecov.io/gh/ide/react-clone-referenced-element/branch/main/graph/badge.svg?token=FwQSK9uKF7)](https://codecov.io/gh/ide/react-clone-referenced-element)


This is a version of `React.cloneElement` that preserves the original element's callback ref even if you specify a new callback ref for the clone.

This library is written for components that use callback refs.

## Installation

Install this module from npm:
```sh
npm install --save react-clone-referenced-element
```

This library is written in ES2018. Your JavaScript runtime must support [trailing commas in function calls](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Trailing_commas#trailing_commas_in_functions) and [object spread properties](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax#spread_in_object_literals). All modern browsers since 2018 support these features.

You will also need to transform or define a global variable named `__DEV__`.

## Usage

The signature of `cloneReferencedElement` is the same as that of `React.cloneElement`. However, when using callback refs, it will preserve the ref on the original component if there is one.

```js
const original =
  <Component ref={component => {
    console.log('Running the original ref handler');
  }} />;
const clone = cloneReferencedElement(original, {
  ref(component) {
    console.log('Running the clone ref handler');
  },
});
```

When the component is mounted, the console will display:
```
Running the clone ref handler
Running the original ref handler
```

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