# @matthamlin/resp

> A responsive helper utility for css-in-js

Latest version **3.0.0** (published 2018-03-31) · MIT license · 0 weekly downloads

## Install

```sh
npm install @matthamlin/resp
pnpm add @matthamlin/resp
yarn add @matthamlin/resp
bun add @matthamlin/resp
```

## Health

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

Positive: no vulnerabilities; high maintenance score.

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

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 3.0.0 |
| Published | 2018-03-31 |
| First published | 2018-01-08 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 8.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 4 |
| Author | Matthew Hamlin |
| Maintainers | matthamlin |
| Keywords | css-in-js, responsive, utility |

## Links

- npm: https://www.npmjs.com/package/@matthamlin/resp
- Repository: https://github.com/hamlim/resp
- Homepage: https://github.com/hamlim/resp#readme
- Issues: https://github.com/hamlim/resp/issues
- npm.io page: https://npm.io/package/@matthamlin/resp

## Alternatives

- [style-dictionary](https://npm.io/package/style-dictionary.md) — 2.0M weekly downloads
- [postcss-merge-idents](https://npm.io/package/postcss-merge-idents.md) — 1.7M weekly downloads
- [@fontsource/noto-sans](https://npm.io/package/@fontsource/noto-sans.md) — 93.0K weekly downloads
- [uglifycss](https://npm.io/package/uglifycss.md) — 71.6K weekly downloads
- [mat4-interpolate](https://npm.io/package/mat4-interpolate.md) — 23.3K weekly downloads

## Recent versions

- 3.0.0 (latest) — 2018-03-31
- 2.0.0 — 2018-01-12
- 1.0.0 — 2018-01-08

## README

# Resp

A css-in-js utility for writing responsive styles.

### Usage

Resp is designed to be used along with a css-in-js library, however it can be used anywhere you would like to generate styles scoped to media queries.

By default Resp generates `min-width` media queries using `rems`. However you can customize the kind of media queries that resp generates by passing in a `mediaQueryFactory` function. See the [API](#API) section below for more.

Resp is a function that takes in two arguments, the first is an object with keys of the breakpoint names `small, medium, large` for example, and values of the pixel breakpoints that each of those labels applies to. The second argument which is optional is the root font size, this is used to determine the breakpoint in rems.

```javascript
import resp from '@matthamlin/resp'

const breakpoints = {
  small: 640, // small is the name of the breakpoint, 640px is the actual value of the breakpoint
  medium: 800,
  large: 1200,
}

const mediaQueries = resp(breakpoints)

/*
mediaQueries === {
  small: function,
  medium: function,
  large: function
}
*/
```

The value returned after calling Resp is an object of keyed functions, with each key mapping to the same name as the breakpoint it represents. This function can then be used as a [tagged template literal](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#Tagged_template_literals) which will return a string represention of the media query.

```javascript
const { small } = mediaQueries

const redAboveSmallBreakpoint = small`
  .class {
    color: red;
  }
`

// redAboveSmallBreakpoint === '@media screen and (min-width: 40rem) { .class { color: red; } }'
```

One of the key values of the functions being tagged template literals is the ability to interpolate some data in your styles:

```Javascript
const specialColor = 'mediumseagreen';

const greenText = small`.class { color: ${specialColor}; }`;
```

Using these styles is as simple as providing this content as children to a style tag:

```javascript
render(
  <React.Fragment>
    <h1 className="title">Hello</h1>
    <style>{small`.title { color: green; }`}</style>
  </React.Fragment>,
)
```

Using these basics we can build an even more advanced example:

```javascript
import resp from '@matthamlin/resp'
import styled from 'react-emotion'

const { small, medium, large } = resp({
  small: 640,
  medium: 800,
  large: 1200,
})

const Container = styled.div`
  color: red;
  ${medium`
    color: blue;
  `} ${large`
    color: purple;
    background-color: ${props.bg};
  `};
`

render(
  <Container bg="mediumseagreen">Hello World</Container>,
)
```

### Using Resp with Emotion

See [this codesandbox link](https://codesandbox.io/s/xk7yj5ry4) for a simple example using Resp with Emotion.

### Using Resp with Styled-Components

See [this codesandbox link](https://codesandbox.io/s/xzomwq46yq) for a simple example using Resp with Styled-Components.

### Using Resp with Glamorous

See [this codesandbox link](https://codesandbox.io/s/o5826rnzl5) for a simple example using Resp with Glamorous

### API

Resp exports a default function that accepts an object maping names to pixel breakpoint values. However it can be customized by passing in the optional second argument:

```js
import resp from '@matthamlin/resp'

const result = resp(
  {
    print: 'print',
    screen: 'screen',
  },
  {
    mediaQueryFactory: ({ breakpoints }) => (
      strings,
      ...interpolations
    ) => {
      return `@media only ${breakpoint} { ${interpolations.reduce(
        (acc, interpolation, ndx) =>
          `${acc}${interpolation}${strings[ndx + 1]}`,
        strings[0],
      )} }`
    },
  },
)

/**
 * result = {
 *   print: (...) => `@media only print { ... }`,
 *   screen: (...) => `@media only screen { ... }`
 * }
 */
```

In the above example resp will generate print and screen based media queries.

The `mediaQueryFactory` function is a higher order function that accepts an object called with the breakpoint, and then returns a function that accepts one primary argument and then a spread of other values (assuming that it is used in a template literal use). If the first argument of the returned function isn't an array then it is being used as an object.

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