# react-primitives

> Primitive React Interfaces Across Targets

Latest version **0.8.1** (published 2020-04-03) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-primitives
pnpm add react-primitives
yarn add react-primitives
bun add react-primitives
```

## Health

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

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

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

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 0.8.1 |
| Published | 2020-04-03 |
| First published | 2016-03-23 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | separate (@types/react-primitives) |
| Module format | CommonJS |
| Dependencies | 4 |
| Unpacked size | 50.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3074 |
| Author | Leland Richardson |
| Maintainers | intelligibabble, mathieudutour |
| Keywords | react |

## Links

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

## Dependencies (4)

- [animated](https://npm.io/package/animated.md) ^0.2.2
- [prop-types](https://npm.io/package/prop-types.md) ^15.7.2
- [react-timer-mixin](https://npm.io/package/react-timer-mixin.md) ^0.13.4
- [create-react-class](https://npm.io/package/create-react-class.md) ^15.6.3

## 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.8.1 (latest) — 2020-04-03
- 0.4.0 (next) — 2017-05-12
- 0.8.0 — 2019-04-10
- 0.7.1 — 2019-04-09
- 0.7.0 — 2018-11-05
- 0.6.1 — 2018-09-05
- 0.6.0 — 2018-06-17
- 0.5.1 — 2018-05-10
- 0.5.0 — 2018-01-28
- 0.4.4 — 2017-11-11
- 0.4.3 — 2017-06-29
- 0.4.2 — 2017-05-16
- 0.4.1 — 2017-05-14
- 0.3.4 — 2017-01-08
- 0.3.3 — 2016-12-31
- … 9 more at https://npm.io/package/react-primitives/versions

## README

# react-primitives

Primitive React Interfaces Across Targets

[![npm](https://img.shields.io/npm/v/react-primitives)]((https://www.npmjs.com/package/react-primitives))

## Installation

```sh
npm install --save react-primitives
```

You will also need to install the targets you want to support:

- web:
  ```sh
  npm install --save react-dom react-native-web react-art
  ```
- native iOS and Android:
  ```sh
  npm install --save react-native
  ```
- sketch:
  ```sh
  npm install --save react-sketchapp react-test-renderer
  ```
- figma:
  ```sh
  npm install --save react-figma
  ```
- vr:
  ```sh
  npm install --save react-360
  ```
- Windows:
  ```sh
  npm install --save react-native-windows
  ```

### Usage

```jsx
import React from "react";
import { View, Text, Image, StyleSheet } from "react-primitives";

class Foo extends React.Component {
  render() {
    return <View style={styles.foo}>{this.props.children}</View>;
  }
}

const styles = StyleSheet.create({
  foo: {
    width: 100,
    height: 100,
    backgroundColor: "#ff00ff"
  }
});
```

## What is this?

This library attempts to propose an ideal set of primitives around building
React applications, regardless of Platform. In the future, this could be
used as a shared interface among React and React Native components that
don't use platform-specific APIs.

Importantly, this includes `StyleSheet` for declaring styles, as well as
`Animated` for doing declarative Animations.

The exported APIs thus far are:

1. `Animated`: Pulled from the [animated](https://github.com/animatedjs/animated) project.
2. `StyleSheet`: Follows React Native's StyleSheet API.
3. `View`: A base component for Layout.
4. `Text`: A base component for Text rendering.
5. `Image`: A base component for Image rendering.
6. `Touchable`: A base component for interaction.
7. `Easing`: A base set of easing functions.
8. `Dimensions`: Get the devices dimensions.
9. `PixelRatio`: Get the devices pixel density.
10. `Platform`: Get information about the platform. (iOS, Android, Web, Sketch, VR,...)

In the future, a `TextInput` component may also be added.

## Props where props are due

This library was largely inspired from the work done by [Nicolas Gallager](https://github.com/necolas)
and his great work on the [react-native-web](https://github.com/necolas/react-native-web) library. A few of the files
in this repo are even copied directly from his project.

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