rp

react-primitives

Primitive React Interfaces Across Targets

Showing:

Popularity

Downloads/wk

1.6K

GitHub Stars

3.1K

Maintenance

Last Commit

1yr ago

Contributors

21

Package

Dependencies

4

Size (min+gzip)

0.8KB

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

react-primitives

Primitive React Interfaces Across Targets

npm

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:

  1. Animated: Pulled from the 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 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.

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Alternatives

No alternatives found

Tutorials

No tutorials found
Add a tutorial