https://github.com/darshan09200/react-native-css-stylesheet
Create a responsive design with the help of CSS queries
https://github.com/darshan09200/react-native-css-stylesheet
css react-native responsive
Last synced: 4 months ago
JSON representation
Create a responsive design with the help of CSS queries
- Host: GitHub
- URL: https://github.com/darshan09200/react-native-css-stylesheet
- Owner: darshan09200
- License: mit
- Created: 2021-10-10T09:21:37.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2022-01-16T11:50:42.000Z (over 4 years ago)
- Last Synced: 2025-10-30T12:37:06.385Z (8 months ago)
- Topics: css, react-native, responsive
- Language: JavaScript
- Homepage:
- Size: 777 KB
- Stars: 4
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# react-native-css-stylesheet
Create responsive design with the help of css queries
## Installation
```bash
npm install react-native-css-stylesheet
```
## Usage
Define styles using [`CssStyleSheet.create()`](#create-styles) instead of `StyleSheet.create()`
```js
import React from "react";
import { Text, View } from "react-native";
import CssStyleSheet from "react-native-css-stylesheet";
const Example = () => {
return (
Example
);
};
const { styles } = CssStyleSheet.create({
text: {
"(orientation: landscape)": {
fontSize: "3rem",
},
fontSize: "2rem",
marginVertical: 20,
},
container: {
alignItems: "center",
flex: 1,
justifyContent: "center",
},
});
```
## Styling Options
### Size with custom units
| Unit | Description | Example |
| ------------------- | ------------------------------------------------------------------------------------------------------- | ------------------ |
| `s` | scales `size` in a linear manner relative to screen width | `7.5s` |
| `vs` | scales `size` in a linear manner relative to screen height | `9vs` |
| `ms` | scales `size` in a linear manner relative to screen width. `factor` is resize factor. Default is `0.5` | `7ms` or `7ms0.25` |
| `mvs` | scales `size` in a linear manner relative to screen height. `factor` is resize factor. Default is `0.5` | `9ms` or `9ms0.75` |
| `rem` | size relative to the default font size | `1rem` |
| `vw` | size relative to the window width | `1.02vw` |
| `vh` | size relative to the window height | `10vh` |
| `vmin` | size relative to the shortest dimension compared between window width and height | `10vmin` |
| `vmax` | size relative to the largest dimension compared between window width and height | `10vmax` |
> **Note:**
>
> 1. `size` can be any positive number (including decimal) for `s`, `vs`, `ms`, and `mvs`
> 2. `size` can be any positive number ranging from 0 to 100 (including decimal) for `rem`, `vw`, `vh`, `vmin`, and `vmax`
> 3. `factor` can be any positive number ranging from 0 and 1 (including decimal)
### Queries
| Query | Supported Values | Description | Example |
| ------------------------ | ------------------------------------------------ | ---------------------------------------------------------- | ---------------------------------------------------------------- |
| `(orientation: )` | `portrait` or `landscape` | Matches the orientation with the provided value | 1. `(orientation: landscape)`
2. `(orientation: portrait)` |
| `(min-width: )` | [custom size](#size-with-custom-units) or number | Matches the minimum window width with the provided value. | 1. `(min-width: 320)`
2. `(min-width: 10s)` |
| `(max-width: )` | [custom size](#size-with-custom-units) or number | Matches the maximum window width with the provided value. | 1. `(max-width: 600)`
2. `(max-width: 10rem)` |
| `(min-height: )` | [custom size](#size-with-custom-units) or number | Matches the minimum window height with the provided value. | 1. `(min-height: 600)`
2. `(min-height: 15vs)` |
| `(max-height: )` | [custom size](#size-with-custom-units) or number | Matches the maximum window height with the provided value. | 1. `(max-height: 1200)`
2. `(max-height: 25mvs0.75)` |
> **Note:**
>
> 1. Brackets around queries are compulsory.
> 2. Any [custom size](#size-with-custom-units) defined in the above section will work, but using units like `vw`, `vh`, `vmin`, or `vmax` would always result in true since they are relative to the window with and height.
#### Grouping Queries
| Keyword | Description | Example |
| --------------------- | ------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------- |
| ` and ` | Applies the styles if queries preceding and succeeding to the keyword `and` is true. | `(orientation: landscape) and (min-width:320)` |
| ` , ` | Applies the styles if either of the queries preceding and succeeding to the keyword `,` is true. | `(min-height: 600) , (min-width:320)` |
| `()` | Create group of queries if you have more than one conditional keyword | `((orientation: landscape) and (min-width:320)),((orientation: portrait) and (min-height:600))` |
## API
### `create (styles)`
A function which returns computed styles on the basis of media queries specified.
#### Arguments
1. `styles` (_object_) : A style object either the normal or with custom properties and queries.
#### Return
- `cssStyleSheet` (_object_)
- `styles` (_object_): A style object which is generated during application start. See basic [example](#usage) above.
- `responsiveStyles` (_Function_): A function to regenerate the styles during run time. When used inside a component, it will generate a new style object every time the component updates. See [example](#example) below.
#### Example
```js
import React from "react";
import { Text, View } from "react-native";
import CssStyleSheet from "react-native-css-stylesheet";
const Example = () => {
const styles = responsiveStyles();
return (
Example
);
};
const { responsiveStyles } = CssStyleSheet.create({
text: {
"(orientation: landscape)": {
fontSize: "3rem",
},
fontSize: "2rem",
marginVertical: 20,
},
container: {
alignItems: "center",
flex: 1,
justifyContent: "center",
},
});
```
### useCssStyleSheet (responsiveStyles)
Hook which returns recalculated styles every time there is a dimension change.
#### Arguments
1. `responsiveStyles` (_Function_) : `responsiveStyles` function returned from [`create`](#create-styles) function.
#### Return
- `styles` (_object_): An object which is recalculated every time dimension change happens. See example below.
#### Example
```js
import React from "react";
import { Text, View } from "react-native";
import CssStyleSheet, { useCssStyleSheet } from "react-native-css-stylesheet";
const ResponsiveFunctionExample = () => {
const styles = useCssStyleSheet(responsiveStyles);
return (
ResponsiveFunctionExample
);
});
const { responsiveStyles } = CssStyleSheet.create({
text: {
"(orientation: landscape)": {
fontSize: "3rem",
},
fontSize: "2rem",
marginVertical: 20,
},
container: {
alignItems: "center",
flex: 1,
justifyContent: "center",
},
});
export default ResponsiveFunctionExample;
```
### withCssStyleSheet (responsiveStyles, Component)
Link a style sheet with a component using the higher-order component pattern. It does not modify the component passed to it; instead, it returns a new component with a `cssStyleSheet` prop. This prop contains the responsive style object which gets recalculated every time there is a dimension change detected. This props can be used as a normal style object.
- It adds a `cssStyleSheet` prop.
- It forwards refs to the inner component.
#### Arguments
1. `responsiveStyles` (_Function_) : `responsiveStyles` function returned from [`create`](#create-styles) function.
2. `Component` (_React Element_) : The component that will be wrapped
#### Return
- `Component` (_React Element_): The new component created.
#### Example
```js
import React from "react";
import { Text, View } from "react-native";
import CssStyleSheet, { withCssStyleSheet } from "react-native-css-stylesheet";
class ClassWithoutStyleSheet extends React.Component {
render() {
const { cssStyleSheet } = this.props;
return (
ResponsiveClassExample
);
}
}
const { responsiveStyles } = CssStyleSheet.create({
text: {
"(orientation: landscape)": {
fontSize: "3rem",
},
fontSize: "2rem",
marginVertical: 20,
},
container: {
alignItems: "center",
flex: 1,
justifyContent: "center",
},
});
const ResponsiveClassExample = withCssStyleSheet(responsiveStyles, ClassWithoutStyleSheet);
export default ResponsiveClassExample;
/**
* OR
* export default withCssStyleSheet(responsiveStyles, ClassWithoutStyleSheet);
*/
```
## Todo
- [ ] Add Examples screenshot/gif
- [ ] Nested queries support
- [ ] Platform based media queries
## License
[MIT](LICENSE)