matthewmueller / react-web-sdk

react-web-sdk

Experimental / Proof of concept

A React SDK (~9KB gzipped) for creating web applications and toolkits. Inspired by react-native.

It includes the following components:

• View: a flexbox primitive
• Text: a text primitive
• Image: an image primitive
• (Component: base / implementation)

And uses a styling strategy that maps inline styles to single-purpose CSS rules.

This proof of concept uses a CSS bundle (~4.5KB gzipped) of 300+ precomputed declarations. A more sophisticated implementation is likely to produce a slightly larger CSS file and fewer inline styles.

Components

All components define explicit style PropTypes according to the StyleProp spec.

Component

TODO

Component

View

TODO

A flexbox container; foundational layout building block.

View spec

See this guide to flexbox.

Text

TODO

Text spec

Image

TODO

Image spec

Styling

Styling is identical to using inline styles in React, but most inline styles are converted to unique CSS classes. This is only true for the SDK components.

The companion stylesheet can be referenced as an external resource, inlined, or injected by JS.

See the styling strategy docs for more details.

Use plain JavaScript objects

Use JavaScript to write style definitions in React components:

const style = {
  common: {
    backgroundColor: 'white',
    borderRadius: '1em'
  },
  root: {
    flexDirection: 'row',
    justifyContent: 'space-between'
  },
  image: {
    opacity: 0.5
  },
  text: {
    fontWeight: '300'
  }
};

Use the style attribute

The style attribute is a simple API for creating element-scoped styles.

import {View} from 'react-web-sdk';

class Example extends React.Component {
  render() {
    return (
      <View style={style.root}>...</View>
    );
  }
}

Combine and override style objects:

import baseStyle from './baseStyle';

const buttonStyle = {
  ...baseStyle,
  backgroundColor: '#333',
  color: '#fff'
}

Utilities

getOtherProps(reactComponentInstance)

Returns an object containing all the props from this.props that are not defined in propTypes.

omitProps(obj, arrayOfExcludedProps)

Returns an object with the specified props excluded.

pickProps(obj, arrayOfIncludedProps)

Returns an object with the specified props included.

Development

npm install
npm run build:example:watch
open example/index.html