# @element-public/react-common

> Shared utilities for Element React

Latest version **5.88.2-alpha.1** (published 2026-07-08) · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install @element-public/react-common
pnpm add @element-public/react-common
yarn add @element-public/react-common
bun add @element-public/react-common
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 5.88.2-alpha.1 |
| Published | 2026-07-08 |
| First published | 2024-07-17 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 4 |
| Unpacked size | 373.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | arkadiusz.slowikowski, slowikowskiarkadiusz |

## Links

- npm: https://www.npmjs.com/package/@element-public/react-common
- npm.io page: https://npm.io/package/@element-public/react-common

## Dependencies (4)

- [warning](https://npm.io/package/warning.md) ^4.0.3
- [prop-types](https://npm.io/package/prop-types.md) ^15.8.1
- [lodash.merge](https://npm.io/package/lodash.merge.md) ^4.6.2
- [@babel/runtime-corejs3](https://npm.io/package/@babel/runtime-corejs3.md) ^7.26.7

## Recent versions

- 5.88.2-alpha.1 (latest) — 2026-07-08
- 2.0.0-alpha.0 (alpha) — 2025-02-08
- 5.85.0-alpha.1 — 2026-06-18
- 5.84.0-alpha.1 — 2026-06-18
- 5.79.7-alpha.1 — 2026-05-18
- 5.72.2-alpha.1 — 2026-01-22
- 5.68.10-alpha.1 — 2025-11-26
- 5.62.0-alpha.1 — 2025-09-24
- 5.56.0-alpha.2 — 2025-07-07
- 5.56.0-alpha.1 — 2025-07-07
- 5.54.0 — 2025-07-03
- 1.1.5 — 2024-12-23
- 1.1.4 — 2024-12-18
- 1.1.3 — 2024-12-16
- 1.1.2 — 2024-12-16
- … 2 more at https://npm.io/package/@element-public/react-common/versions

## README

# Common

## Description

Collection of utilities and components that are shared throughout the Element React Components.

## Install from Artifactory

- Verify that you have access to (https://docs.int.bayer.com/cloud/devops/artifactory/)[Bayer Artifactory]
    - Verify your token is correctly set up in your .npmrc as per the link above
- Verify you have the @element scope configured in your .npmrc
    - `@element:registry=https://artifactory.bayer.com/artifactory/api/npm/npm-platforms-engineering/`
- Install the component and themes bundles
    - `npm i @element/react-components @element/themes`
        - alternatively install the component individually along with the themes bundle `npm i @element/react-common @element/themes`

## Notes

The Element Common library is composed of multiple utilities and components that are shared throughout the Element React Components.

- addProps
    - Adds prop to component
    - @param {Array} children Array of children to add the props to
    - @param {Object} props Props to be added to children
    - @return {Node} New component with props added
- addClass
    - Adds className to component and returns the new component
    - @param {Array} children Array of children to add the className to
    - @param {Sting} className ClassName to be added to children
    - @return {Node} New component with class added
- formatUnit
    - Adds unit to a value
    - @param {Number} val Array of children to add the className to
    - @param {String} [defaultUnit=px] Unit to add, if omm
    - @return {String} Formatted value with unit
- returnFocusAfterClosing
    - Sets focus to element if found bu the given selector
    - @param {String} returnFocusSelector Query to find element
- deprecatedComponent
    - Consoles warning if a deprecated component is used
    - @param {Node} component Component that is deprecated
    - @param {String} explanation Explanation of why component is deprecated and alternatives to use
- deprecatedProp
    - Consoles warning if a deprecated prop is used
    - @param {Function} propType React propType, ie. PropTypes.bool
    - @param {String} componentName Name of the component the prop is in
    - @param {String} explanation Explanation of why prop is deprecated and alternatives to use
    - @return {Function} Validation function to display warning only if prop is used
- deprecatedOneOf
    - Consoles warning if a deprecated accepted value prop is used
    - @param {Function} propType React propType, ie. PropTypes.bool
    - @param {String[]} deprecatedList Lis of accepted values
    - @param {String} componentName Name of the component the prop is in
    - @param {String} explanation Explanation of why prop is deprecated and alternatives to use
    - @return {Function} Validation function to display warning only if prop is used
- requiredIfPropType
    - Use to display warning for required props if they are only required conditionally
    - @param {Function} propType React propType, ie. PropTypes.bool
    - @param {String} componentName Name of the component the prop is in
    - @param {String} requiredBy Name of prop that has to be sent to be required
    - @return {Function} Validation function to display warning only if the requiredBy prop is sent and the prop is not used
- queryCheck
    - Checks if a given selector is a valid query. Errors if selector is invalid. Use in a try/catch
    - @param {String} selector Selector to check
- isSelectorValid
    - Checks if a given selector is a valid query.
    - @param {String} selector Selector to check
    - @return {Boolean} Returns true if selector is valid, false if invalid
- eds-query-selector
    - Select query from document. Uses `document.querySelector`
    - @param {String} selector Selector to find
    - @return {Boolean} Returns found element, false if invalid selector
- eds-random-id
    - @param {String} [name] Name to add in generated ID
    - @return {String} Generated id
- getElementNotFoundWarning
    - @param {String} selector Selector not found
    - @return {String} Generated not found message
- getInvalidSelectorWarning
    - @param {String} selector Selector not found
    - @return {String} Generated invalid selector message
- eds-warning
    - Consoles warning
    - @param {String} message Message to be logged
- iconList
- usePrevious
    - Check previous value of state or prop
    - @param {Any} value Value that ref is changing to
    - @param {Any} initialValue Initial value
    - @return {Any} Pervious value
- ConditionalWrapper
    - React HOC to conditional wrap children based on condition

    ```jsx
    <ConditionalWrapper
        condition={SomeConditionToCheck}
        wrapper={children => <a href='someLink.com'>{children}</a>}
    >
        <div>SomeContent</div>
    </ConditionalWrapper>
    ```

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