# flapstacks

> Flex layout primitive for React & React Native

Latest version **1.0.0** (published 2022-05-21) · MIT license · 0 weekly downloads

## Install

```sh
npm install flapstacks
pnpm add flapstacks
yarn add flapstacks
bun add flapstacks
```

## Health

**Score 45/100 (D)** — status: abandoned.

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

Warnings: low downloads.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2022-05-21 |
| First published | 2022-05-21 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 19.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Tiaan |
| Maintainers | tiaanduplessis |
| Keywords | flex, layout, stack, component, flapstacks |

## Links

- npm: https://www.npmjs.com/package/flapstacks
- Repository: https://github.com/tiaanduplessis/flapstacks
- Issues: https://github.com/tiaanduplessis/flapstacks/issues
- npm.io page: https://npm.io/package/flapstacks

## Dependencies (1)

- [react-polymorphic-types](https://npm.io/package/react-polymorphic-types.md) ^2.0.0

## Alternatives

- [gamedig](https://npm.io/package/gamedig.md) — 29.3K weekly downloads
- [join-monster](https://npm.io/package/join-monster.md) — 12.8K weekly downloads
- [masked](https://npm.io/package/masked.md) — 5.5K weekly downloads
- [@comunica/actor-query-process-explain-logical](https://npm.io/package/@comunica/actor-query-process-explain-logical.md) — 4.7K weekly downloads
- [@veracity/vui](https://npm.io/package/@veracity/vui.md) — 4.6K weekly downloads

## Recent versions

- 1.0.0 (latest) — 2022-05-21

## README

# 🥞 flapstacks
[![package version](https://img.shields.io/npm/v/flapstacks.svg?style=flat-square)](https://npmjs.org/package/flapstacks)
[![package downloads](https://img.shields.io/npm/dm/flapstacks.svg?style=flat-square)](https://npmjs.org/package/flapstacks)
[![standard-readme compliant](https://img.shields.io/badge/readme%20style-standard-brightgreen.svg?style=flat-square)](https://github.com/RichardLitt/standard-readme)
[![package license](https://img.shields.io/npm/l/flapstacks.svg?style=flat-square)](https://npmjs.org/package/flapstacks)
[![make a pull request](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)

Flex layout primitive for React & React Native (wip)

## 📖 Table of Contents
- [🥞 flapstacks](#-flapstacks)
  - [📖 Table of Contents](#-table-of-contents)
  - [👀 Background](#-background)
    - [Features](#features)
  - [⚙️ Install](#️-install)
  - [📖 Usage](#-usage)
    - [Overridable styles](#overridable-styles)
  - [📚 API](#-api)
  - [💬 Contributing](#-contributing)
  - [🪪 License](#-license)

## 👀 Background

This package is a tiny wrapper around the [Flexbox](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox) one-dimensional layout method to allow for a prop based styling API as seen in [Styled System](https://styled-system.com/). 

### Features

- Works in React and React Native (wip)
- Flexible shorthand props
- TypeScript support with [API docs](https://paka.dev/npm/flapstacks)
- Polymorphic component type
- Style overriding to hook into your Design System

## ⚙️ Install

Install the package locally within you project folder with your package manager:

With `npm`:
```sh
npm install flapstacks
```

With `yarn`:
```sh
yarn add flapstacks
```

With `pnpm`:
```sh
pnpm add flapstacks
```

## 📖 Usage

```tsx
import { Stack } from "flapstacks";

const Box = () => (
  <div style={{ height: 100, width: 100, backgroundColor: "tomato" }} />
);

export default function App() {
  return (
    <Stack
      as="main"
      direction="column"
      cross="center"
      justifyContentSpaceBetween
      gap={2}
    >
      <Box />
      <Box />
      <Box />
      <Box />
      <Box />
    </Stack>
  );
}
```

### Overridable styles

If you have an existing set to design tokens that you would like to connect to the props of the stack then the `onOverrideStyles` prop can be used:

```tsx
const CustomStack = (props) => {
  const handleOverride = (style: CSSProperties) => {
      // Design tokens
      const scale = ["16px", "32px"]
      if (style.gap) {
        style.gap = scale[style.gap as number];
      }
    
      return style;
    }
  
  return <Stack {...props} onOverrideStyles={handleOverride}>
}
```

## 📚 API

For all configuration options, please see the [API docs](https://paka.dev/npm/flapstacks).

## 💬 Contributing

Got an idea for a new feature? Found a bug? Contributions are welcome! Please [open up an issue](https://github.com/tiaanduplessis/flapstacks/issues) or [make a pull request](https://makeapullrequest.com/).

## 🪪 License

[MIT © Tiaan du Plessis](./LICENSE)

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