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:

• Image: an image primitive
• Text: a text primitive
• TextInput: a text input primitive
• View: a flexbox primitive

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.

View

TODO

A flexbox container; foundational layout building block.

View spec

See this guide to flexbox.

Text

TODO

Text spec

TextInput

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.

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'
}

Development

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