# styled-native-breakpoint-for-web

> Add breakpoints to your styled components to use for the web in your Universal Expo Web project

Latest version **0.1.4** (published 2019-08-27) · MIT license · 0 weekly downloads

## Install

```sh
npm install styled-native-breakpoint-for-web
pnpm add styled-native-breakpoint-for-web
yarn add styled-native-breakpoint-for-web
bun add styled-native-breakpoint-for-web
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.4 |
| Published | 2019-08-27 |
| First published | 2019-08-21 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 226.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 7 |
| Author | Rodrigo Figueroa |
| Maintainers | bartoindahouse |
| Keywords | expo, react, react-native, react-native-web, styled-components, breakpoints, media-queries |

## Links

- npm: https://www.npmjs.com/package/styled-native-breakpoint-for-web
- Repository: https://github.com/bidah/styled-native-breakpoint-for-web
- Homepage: https://github.com/bidah/styled-native-breakpoint-for-web#readme
- Issues: https://github.com/bidah/styled-native-breakpoint-for-web/issues
- npm.io page: https://npm.io/package/styled-native-breakpoint-for-web

## Dependencies (1)

- [@babel/runtime](https://npm.io/package/@babel/runtime.md) ^7.5.5

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.1.4 (latest) — 2019-08-27
- 0.1.3 — 2019-08-23
- 0.1.2 — 2019-08-22
- 0.1.0 — 2019-08-21
- 0.0.9 — 2019-08-21
- 0.0.8 — 2019-08-21

## README

# styled-native-breakpoint-for-web

Add breakpoints to your Styled Components to use for the web in your React Native [Universal Expo Web](https://docs.expo.io/versions/v34.0.0/introduction/running-in-the-browser/) project.

## Introduction

When creating a [Expo](https://expo.io/) universal app using [Styled Components](https://github.com/styled-components/styled-components) you need desktop breakpoints to deliver a good experience for the web. Your mobile layout is just meant for the mobile web, you are missing our old pal the desktop view.

Styled Components media queries are meant to work just for the web so they are of no use when creating styled components that need breakpoints to work with [React Native For Web](https://github.com/necolas/react-native-web) which is what Expo is using to create your web build.

We are also emulating the responsiveness of web media queries behaviour, so if you resize your browser window and you hit a breakpoint, layout will change accordingly.

## Installation

```
npm install -s styled-native-breakpoint-for-web
```

## Usage with `styled`

Add `ThemeProvider` as a wrapper to `App.js`. If you are already using the `ThemeProvider` component provided by `styled-components/native` replace it with this one.

You can add your theme in the `theme` prop or don't use it at all if you are not using a theme right now.

**Setup without theme:**

```javascript
//App.js
import ThemeProvider from 'styled-native-breakpoint-for-web';

<ThemeProvider>...your App.js content here</ThemeProvider>;
```

**Setup with theme:**

```javascript
//App.js
import ThemeProvider from 'styled-native-breakpoint-for-web';
import myTheme from 'my-theme-path';

<ThemeProvider theme={myTheme}>...your App.js content here</ThemeProvider>;
```

```javascript
import styled from 'styled-components/native';

const MyComponent = styled.View`
  flex: 1;
  background: orangered;
  ${({ theme: { bp } }) =>
    bp.desktop(css`
      background: deepskyblue;
    `)}
`;
```

## Usage with `css` prop

import `withTheme` and `css` from `styled-components/native` and export your component using the HOC.

```javascript
import { withTheme, css } from 'styled-components/native';
//...rest of MyComponent code
export default withTheme(MyComponent);
```

With this you will have the `theme` prop available to consume `bp` later.

Then when using the `css` prop simply add an interpolation with `theme.bp.lgDesktop()`

```javascript
let {theme} = this.props;
...
<View css={css`
  align-self: center;
  ${theme.bp.lgDesktop(css`
    align-self: flex-start;
  `)}
`}
/>
</View>
```

## Custom breakpoints

By default you get to use 3 breakpoints from `bp` that have the following values.

```javascript
{
  tablet: 768,
  desktop: 992,
  lgDesktop: 1200
}
```

To setup new breakpoints pass the `breakpoints` prop to `ThemeProvider` with an object with the key as the name of the breakpoint and the value as number representing the minimum width. Take note that previous defaults will be overwritten.

```javascript
<ThemeProvider
  breakpoints={{
    ipadPro: 1024,
    lgDesktop: 1280,
    xlDesktop: 1336,
  }}>
  // ...your App.js content here
</ThemeProvider>
```

```javascript
import styled, { css } from 'styled-components/native';

const MyComponent = styled.View`
  flex: 1;
  background: orangered;
  ${({ theme: { bp } }) =>
    bp.ipadPro(css`
      background: deepskyblue;
    `)}
  ${({ theme: { bp } }) =>
    bp.xlDesktop(css`
      background: lime;
    `)}
`;
```

## Demo

<https://snack.expo.io/@bidah/styled-native-bp-for-web>

## TODO

- Add functionality to setup custom breakpoints in theme.
- Example folder running but only in Simulator. Got stuck running Expo web.
- Add compatibility for Emotion
- Add tests

---
_Source: https://npm.io/package/styled-native-breakpoint-for-web · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._