# reactjs-common

> Things common in react project

Latest version **0.2.1** (published 2026-08-18) · MIT license · 0 weekly downloads

## Install

```sh
npm install reactjs-common
pnpm add reactjs-common
yarn add reactjs-common
bun add reactjs-common
```

## Health

**Score 60/100 (C)** — status: active.

Positive: has types; no vulnerabilities; recently updated; high maintenance score.

Warnings: low downloads; no esm support; pre 1.0.

## Facts

| | |
|---|---|
| Version | 0.2.1 |
| Published | 2026-08-18 |
| First published | 2023-07-24 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Node | >=6.0.0 |
| Dependencies | 1 |
| Unpacked size | 9.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | AT Mulyana |
| Maintainers | atmulyana |
| Keywords | react, reactjs, common, javascript |

## Links

- npm: https://www.npmjs.com/package/reactjs-common
- Repository: https://github.com/atmulyana/reactjs-common
- Homepage: https://github.com/atmulyana/reactjs-common#readme
- Issues: https://github.com/atmulyana/reactjs-common/issues
- npm.io page: https://npm.io/package/reactjs-common

## Dependencies (1)

- [javascript-common](https://npm.io/package/javascript-common.md) *

## 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

- 0.2.1 (latest) — 2026-08-18
- 0.2.0 — 2026-08-10
- 0.1.0 — 2025-05-17
- 0.0.4 — 2025-04-09
- 0.0.3 — 2023-08-02
- 0.0.2 — 2023-07-27
- 0.0.1 — 2023-07-24

## README

## **reactjs-common**

This package contains common items exist in some my projects. Although for my projects, it may be useful for you.
Things that can be imported from this package:

### `setRef(refProp, ref)`
It's useful when using `React.forwarRef` and you want to set the `ref` prop to a custom object.  
Parameters:
- `refProp` is `ref` prop value
- `ref` is an object that will be set as the reference of component

Usage:
```
    const WrapperComponent = React.forwardRef((props, ref) => {
        //Some your code..

        setRef(ref, {
            //Your custom object can contain any properties/methods you want
        });
        
        //One reason to use `setRef` is because the wrapped component is a function component
        return <FunctionComponent {...props} />
    })
```

### `extRefCallback(refProp, extRef, callback)`
It creates a callback function that can be set to a `ref` prop. The callback function will extend the
reference object returned by the component.   
Parameters:
- `refProp` is `ref` prop value
- `extRef` is the object containing all extension properties/methods or a function that returns that object.
  If it's a function then the its parameter is the original component reference object.
- `callback` is a function that will be called when the callback function (which is returned by `extRefCallback`)
  is called. This function has one parameter that is the `ref` object that has been extended.

It can be used in `React.forwardRef` like the following code:
```javascript
    const WrapperComponent = React.forwardRef((props, ref) => {
        //Some your code..

        const callbackRef = extRefCallback(ref, {
            //The object containing all extension properties/methods
        });
        
        return <NonFunctionComponent {...props} ref={callbackRef} />
    })
```
Or if the second parameter of `callbackRef` is a function, we may utilize the basic/original `ref` in the
extension object as the following example:
```javascript
    ...
        const callbackRef = extRefCallback(ref, basicRef => ({
            newProp: basicRef.prop ?? '', //a new prop example that needs to access the ref object of `NonFunctionComponent` 
            //... the rest of extension properties/methods
        }));
    ...
``` 

### `forwardRef`
It's a function which is the same as `React.forwarRef` if exists. If not exist, it's its polyfill.

> `React.forwarRef` has been deprecated since React 19

### Types for Flow
##### `Ref<Instance>`
It's the same as `React.RefSetter<Instance>`. Shorter name.

##### `RefCallback<Instance>`
It's a sub type of `React.RefSetter<Instance>`. It only defines the function type that can be set to `ref` prop.

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