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 primitiveText
: a text primitiveImage
: 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.
All components define explicit style
PropTypes according to the StyleProp
spec.
TODO
TODO
A flexbox container; foundational layout building block.
See this guide to flexbox.
TODO
TODO
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 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'
}
};
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'
}
Returns an object containing all the props from this.props
that are not
defined in propTypes
.
Returns an object with the specified props excluded.
Returns an object with the specified props included.
npm install
npm run build:example:watch
open example/index.html