Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/lelandrichardson/react-primitives
Primitive React Interfaces Across Targets
https://github.com/lelandrichardson/react-primitives
Last synced: 28 days ago
JSON representation
Primitive React Interfaces Across Targets
- Host: GitHub
- URL: https://github.com/lelandrichardson/react-primitives
- Owner: lelandrichardson
- License: mit
- Created: 2016-03-23T01:27:07.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2022-11-29T08:07:47.000Z (almost 2 years ago)
- Last Synced: 2024-04-13T12:02:23.906Z (7 months ago)
- Language: JavaScript
- Size: 420 KB
- Stars: 3,086
- Watchers: 68
- Forks: 108
- Open Issues: 25
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome - react-primitives - Primitive React Interfaces Across Targets (JavaScript)
- awesome-list - react-primitives
README
# react-primitives
Primitive React Interfaces Across Targets
[]((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 {this.props.children};
}
}
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.