# @appsomesolutions/rwd-utils

> RWD utils for conditional rendering and styled-components styling on given resolution breakpoints.

Latest version **1.0.4** (published 2020-04-20) · MIT license · 0 weekly downloads

## Install

```sh
npm install @appsomesolutions/rwd-utils
pnpm add @appsomesolutions/rwd-utils
yarn add @appsomesolutions/rwd-utils
bun add @appsomesolutions/rwd-utils
```

## Health

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

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.4 |
| Published | 2020-04-20 |
| First published | 2020-03-29 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 5 |
| Unpacked size | 13.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 4 |
| Author | Appsome Solutions |
| Maintainers | patrykjanik |
| Keywords | rwd, react, styled-components, media |

## Links

- npm: https://www.npmjs.com/package/@appsomesolutions/rwd-utils
- Repository: https://github.com/appsome-solutions/rwd-utils
- Homepage: http://appsome-solutions.com/
- Issues: https://github.com/appsome-solutions/rwd-utils/issues
- npm.io page: https://npm.io/package/@appsomesolutions/rwd-utils

## Dependencies (5)

- [typescript](https://npm.io/package/typescript.md) ^3.8.3
- [@types/node](https://npm.io/package/@types/node.md) ^13.9.5
- [@types/react](https://npm.io/package/@types/react.md) ^16.9.26
- [styled-components](https://npm.io/package/styled-components.md) ^5.0.1
- [@types/styled-components](https://npm.io/package/@types/styled-components.md) ^5.0.1

## 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

- 1.0.4 (latest) — 2020-04-20
- 1.0.3 — 2020-04-20
- 1.0.2 — 2020-04-20
- 1.0.1 — 2020-03-29
- 1.0.0 — 2020-03-29

## README

rwd-utils is a library for easiest window width managing and media styling with react and styled-components.

## Why?
Most of the time you are using some RWD system based on grid or flexbox. 
So if you want to create a 3 column view it will be easy for you, but if you would like to conditionally render component based on window media breakpoints it can be not provided by default in some of UI kits.
That is why we created these utils for conditional breakpoints style changes or rendering changes.
It means you can easily render a button on mobile but hide it on desktop or change its styling due to predefined breakpoints.

## Usage

### How to install


```
npm i @appsomesolutions/rwd-utils
```

OR


```
yarn add @appsomesolutions/rwd-utils
```

### RWDProvider

First of all, we need to wrap our app with RWDProvider to inject context for our media and useRWD functionalities.
```javascript
import { RWDProvider } from '@appsomesolutions/rwd-utils';
// ...

<RWDProvider>
 ...whole app
</RWDProvider>
```

It can accept `breakpoints` object property which defines our desired app breakpoints we want to track. If we won't define them they will be set as default like here:
```javascript
breakpoints={{
  xs: 0,
  sm: 576,
  md: 768,
  lg: 992,
  xl: 1200,
  xxl: 1440,
  xxxl: 1600,
}}
```

If we have changed default breakpoints structure we just need to adjust types definition by extending module like:

```typescript
declare module '@appsomesolutions/rwd-utils' {
  type MediaBreakpointsKeys = 'mobile' | 'tablet' | 'desktop';

  export const media: Record<MediaBreakpointsKeys, MediaCss>;

  export const useRWD: () => {
    less: Record<MediaBreakpointsKeys, boolean>;
    more: Record<MediaBreakpointsKeys, boolean>;
    width: number;
  };
}
```

### media.xyz\``

Media is an object which keeps our breakpoints template literals functions to add predefined styles when given breakpoint occurs.
Those breakpoints are mobile-first so styles you have added for mobile will be applied till their behavior will be overridden by biggest breakpoints.
In practice it looks like:

```typescript
import styled from "styled-components";
import { media } from '@appsomesolutions/rwd-utils';

const MediaTestComponent = styled.h1`
  ${media.xs`
    background-color: blue;
    display: block;
  `}

  ${media.md`
    background-color: red;
    display: block;
  `}

  ${media.xl`
    display: none;
  `}
`;
```

Which will behave like:

![alt text](https://github.com/appsome-solutions/rwd-utils/blob/master/media.gif "screen resized from mobile to desktop, first background color is blue, after reaching mobile breakpoint changes to red, after reaching desktop disappears")

Awesome, isn't it?! 🎉

### useRWD()

useRWD() is a hook that gives us information if given breakpoint is fulfilled or not with `less` than or `more` than an object. Additionally, we can directly read width value with it.

Like example below shows:

```typescript
const UseRwdTestComponent = () => {
  const { less, more, width } = useRWD();

  return (
    <>
      {less.md && <div> Less than medium </div>}
      {more.md && <div> More than medium </div>}
      <div>{width}</div>
    </>
  );
};
```

Result of such code can be conditionally elements or with displayed in real-time when resized screen:

![alt text](https://github.com/appsome-solutions/rwd-utils/blob/master/useRWD.gif "screen resized from mobile to desktop, less than medium text rendered when the screen is below medium size, more than medium is displayed when scree is above medium width and counter of window width changes dynamically when resizing")

❗ useRWD is a dynamic solution if you plan to create Static Page or SSR read below section

## Server Side Rendering or Static Pages

useRWD is a dynamic solution which means it first needs to load the page, retrieves information about screen size and then it starts to be working.
If you plan to do your site as a Static Page or render it on the server then you won't be able to access `window` property and it will be empty.
That is why if can, try to always use `media.breakpoint`` `   instead of useRWD or definitely say "I won't use SSR or Static Page now and in future".

## Life example
[Code Sandox](https://codesandbox.io/s/appsome-solutionsrwd-utils-twjm1?file=/src/App.tsx)

## Appsome Solutions
All thanks for [Appsome Solutions](https://www.appsome-solutions.com/) - Software Development Company from Poland for sharing their code and knowledge with the community for free ❤

---
_Source: https://npm.io/package/@appsomesolutions/rwd-utils · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._