https://github.com/mglagola/style-constraints
[Beta] Bringing css media like queries to react & react-native using javascript
https://github.com/mglagola/style-constraints
css inline-styles javascript react react-native style
Last synced: 11 months ago
JSON representation
[Beta] Bringing css media like queries to react & react-native using javascript
- Host: GitHub
- URL: https://github.com/mglagola/style-constraints
- Owner: mglagola
- Created: 2018-03-14T23:01:04.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2018-10-17T14:44:27.000Z (over 7 years ago)
- Last Synced: 2025-06-12T20:33:35.247Z (about 1 year ago)
- Topics: css, inline-styles, javascript, react, react-native, style
- Language: JavaScript
- Homepage: http://npmjs.com/package/style-constraints
- Size: 240 KB
- Stars: 5
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
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](https://www.w3schools.com/css/css3_mediaqueries.asp) using javascript.
[](https://npm.im/style-constraints) [](https://travis-ci.org/mglagola/style-constraints)
## Installation
Install both `style-constraints` and `lodash` as `lodash` is a `peerDependency`.
```
npm install --save style-constraints lodash
```
## Documentation
Coming soon.
## Usage Example
```js
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 (
Row 1
Row 2
Row 3
Row 4
Row 5
Row 6
Row 7
Row 8
);
};
// "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](https://github.com/mglagola/style-constraints/tree/master/examples/react-native)
* React Web - coming soon.