style-constraints
v0.2.4
Published
Small library that mimics some of the functionality of css media queries using javascript
Downloads
13
Readme
Style Constraints
Note: This is in beta and the API may change before v1.0.0
release. Examples and docs may be outdated as well.
The goal of style constraints is to mimic some of the functionality of css media queries using javascript.
Installation
Install both style-constraints
and lodash
as lodash
is a peerDependency
.
npm install --save style-constraints lodash
Documentation
Coming soon.
Usage Example
import React from 'react';
import { Text, View } from 'react-native';
import styleConstraints from 'style-constraints';
// For the sake of simplicity, omitting on-resize code.
// For examples of what on-resize.js may look like for both
// react native and react web, see: https://gist.github.com/mglagola/e4d22b3acb31ccb56642b3bf02f0e814
import onResize from './on-resize';
const Rows = ({
deviceSize = { width: 0, height: 0 },
}) => {
const select = styleConstraints(deviceSize);
return (
<View style={select(sc.container)}>
<Text style={select(sc.text)}>Row 1</Text>
<Text style={select(sc.text)}>Row 2</Text>
<Text style={select(sc.text)}>Row 3</Text>
<Text style={select(sc.text)}>Row 4</Text>
<Text style={select(sc.text, sc.moreText)}>Row 5</Text>
<Text style={select(sc.text, sc.moreText)}>Row 6</Text>
<Text style={select(sc.text, sc.moreText)}>Row 7</Text>
<Text style={select(sc.text, sc.moreText)}>Row 8</Text>
</View>
);
};
// "sc" is short for "style constraints"
const sc = {
container: [{
when: true,
style: {
flex: 1,
backgroundColor: '#aaa',
flexDirection: 'row',
}
}],
text: [{
when: true,
style: {
paddingLeft: 10,
paddingRight: 10,
fontSize: 18,
fontWeight: 'bold',
},
}, {
when: 'gte',
width: 400,
style: {
color: 'red',
},
}],
moreText: [{
when: 'lte',
width: 400,
style: {
display: 'none',
},
}],
};
export default onResize(Rows);
Demos
- React Native
- React Web - coming soon.