Awesome
react-primitives
Primitive React Interfaces Across Targets
Installation
npm install --save react-primitives
You will also need to install the targets you want to support:
- web:
npm install --save react-dom react-native-web react-art
- native iOS and Android:
npm install --save react-native
- sketch:
npm install --save react-sketchapp react-test-renderer
- figma:
npm install --save react-figma
- vr:
npm install --save react-360
- Windows:
npm install --save react-native-windows
Usage
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:
Animated
: Pulled from the animated project.StyleSheet
: Follows React Native's StyleSheet API.View
: A base component for Layout.Text
: A base component for Text rendering.Image
: A base component for Image rendering.Touchable
: A base component for interaction.Easing
: A base set of easing functions.Dimensions
: Get the devices dimensions.PixelRatio
: Get the devices pixel density.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 and his great work on the react-native-web library. A few of the files in this repo are even copied directly from his project.