# @atomic-layout/emotion

> Physical representation of layout composition to create declarative, responsive layouts in React.

Latest version **0.16.2** (published 2020-08-06) · MIT license · 0 weekly downloads

## Install

```sh
npm install @atomic-layout/emotion
pnpm add @atomic-layout/emotion
yarn add @atomic-layout/emotion
bun add @atomic-layout/emotion
```

## Health

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

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.16.2 |
| Published | 2020-08-06 |
| First published | 2020-01-23 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 105.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1137 |
| Author | Artem Zakharchenko |
| Maintainers | kettanaito |
| Keywords | atomic, layout, responsive, composition, css grid, react, emotion |

## Links

- npm: https://www.npmjs.com/package/@atomic-layout/emotion
- Repository: https://github.com/kettanaito/atomic-layout/tree/master/packages/atomic-layout-emotion
- Issues: https://github.com/kettanaito/atomic-layout/issues
- Funding: https://opencollective.com/atomic-layout
- npm.io page: https://npm.io/package/@atomic-layout/emotion

## Dependencies (1)

- [@atomic-layout/core](https://npm.io/package/@atomic-layout/core.md) ^0.14.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

- 0.16.2 (latest) — 2020-08-06
- 0.16.1 — 2020-04-24
- 0.16.0 — 2020-04-22
- 0.14.0 — 2020-04-05
- 0.13.0 — 2020-04-01
- 0.12.2 — 2020-04-01
- 0.12.1 — 2020-03-30
- 0.12.0 — 2020-02-12
- 0.12.0-alpha.2 — 2020-01-24
- 0.12.0-alpha.1 — 2020-01-23
- 0.12.0-alpha.0 — 2020-01-23

## README

<p align="center">
  <img src="https://raw.githubusercontent.com/kettanaito/atomic-layout/master/packages/atomic-layout-emotion/logo-full.png" width="400" alt="Atomic Layout logo" />
</p>

<div align="center">

[![Package version](https://img.shields.io/npm/v/@atomic-layout/emotion.svg?color=%237B85FF)][npm-url]
[![Package size](https://img.shields.io/bundlephobia/minzip/@atomic-layout/emotion.svg?color=%237B85FF)][bundlephobia-url]
[![Build status](https://img.shields.io/circleci/project/github/kettanaito/atomic-layout/master.svg)][build-url]
[![Dependencies status](https://img.shields.io/david/kettanaito/atomic-layout.svg?color=%237B85FF)][dependencies-url]

[![Discord channel](https://img.shields.io/discord/102860784329052160.svg?label=Chat&logo=discord&style=flat&color=%237B85FF)][community-reactiflux]
[![Spectrum channel](https://withspectrum.github.io/badge/badge.svg)][community-spectrum]

</div>

<br/>

**Atomic Layout** is a spatial distribution library for React. It uses [CSS Grid][css-grid] to define layout areas and render them as React components. This pattern encourages separation of elements and spacing, preventing contextual implementations and boosting maintenance of layouts.

```jsx
import React from 'react'
import { Composition } from '@atomic-layout/emotion'

// Define layout areas: visual representation
// of what composes a layout, detached from
// what components are actually rendered.
const areasMobile = `
  thumbnail
  header
  footer
`

// Declare responsive changes of your areas.
// Operate in two dimensions, remove areas
// or introduce new ones.
const areasTablet = `
  thumbnail header
  thumbnail footer
`

const Card = ({ title, imageUrl, actions }) => (
  <Composition areas={areasMobile} areasMd={areasTablet} gap={20}>
    {/* Get React components based on provided areas */}
    {({ Thumbnail, Header, Footer }) => (
      <React.Fragment>
        <Thumbnail>
          {/* Render anything, including another Composition */}
          <img src={imageUrl} alt={title} />
        </Thumbnail>
        {/* Preserve semantics with polymorphic prop */}
        <Header as="h3">{title}</Header>
        {/* Responsive props: just suffix with a breakpoint name */}
        <Footer padding={10} paddingMd={20}>
          {actions}
        </Footer>
      </React.Fragment>
    )}
  </Composition>
)

export default Card
```

## Install

```bash
npm install @atomic-layout/emotion @emotion/core @emotion/styled
```

> Using something else than `emotion`? See the full list of [Atomic Layout implementations](../../README.md#implementations).

## Documentation

> **See the [Official documentation][atomic-layout-docs].**

There are some shortcuts to get you started:

- [Motivation](https://redd.gitbook.io/atomic-layout/motivation)
- [**Getting started**](https://redd.gitbook.io/atomic-layout/getting-started)
- [Responsive props](https://redd.gitbook.io/atomic-layout/fundamentals/responsive-props)
- [Recipes](https://redd.gitbook.io/atomic-layout/recipes/semantics)

[npm-url]: https://npmjs.com/package/@atomic-layout/emotion
[bundlephobia-url]: https://bundlephobia.com/result?p=@atomic-layout/emotion
[build-url]: https://circleci.com/gh/kettanaito/atomic-layout
[dependencies-url]: https://david-dm.org/kettanaito/atomic-layout
[community-spectrum]: https://spectrum.chat/atomic-layout
[community-reactiflux]: https://discordapp.com/channels/102860784329052160/543033450924474378
[css-grid]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout
[atomic-layout-docs]: https://redd.gitbook.io/atomic-layout

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