# style-equal

> An efficient equality algorithm for React Native inline styles

Latest version **1.0.0** (published 2016-04-24) · MIT license · 0 weekly downloads

## Install

```sh
npm install style-equal
pnpm add style-equal
yarn add style-equal
bun add style-equal
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2016-04-24 |
| First published | 2016-04-24 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 19 |
| Author | Leland Richardson |
| Maintainers | intelligibabble |
| Keywords | react, react-native, shallow-equal, shouldcomponentupdate, style, stylesheet |

## Links

- npm: https://www.npmjs.com/package/style-equal
- Repository: https://github.com/lelandrichardson/style-equal
- Homepage: https://github.com/lelandrichardson/style-equal#readme
- Issues: https://github.com/lelandrichardson/style-equal/issues
- npm.io page: https://npm.io/package/style-equal

## 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.0 (latest) — 2016-04-24

## README

# style-equal

An efficient equality algorithm for React Native inline styles


# Why

`shouldComponentUpdate` is a powerful way to improve performance of react and
react native applications, but often you will want to allow for a component to have
a style prop to make the style of something be configurable.

Since `style` in react native can be of many forms (an object, a number, an array of both,
or a nested array of both), it is not trivial or practical to implement an equality test for these props
in the `shouldComponentUpdate` method.


## Installation

```sh
npm i style-equal --save
```



## Usage

```
import styleEqual from 'style-equal';

// ...

shouldComponentUpdate(nextProps) {
  return !styleEqual(this.props.style, nextProps.style);
}

```


## Caveats

The `styleEqual` algorithm is implemented to be fast and efficient for usage
with `shouldComponentUpdate` methods in react. The algorithm will never give
a false-positive (ie, saying two things are equal when they are not), however,
there are things that are semantically equivalent that the algorithm will 
return false for. One example of this is when comparing two styles such as:

```
styleEqual([1, false, 2], [1, 2]) // returns false
```

The above will always render the same styles, however the algorithm is built
to assume that the position of a style will not change "slots" of the array.

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