tiaanduplessis / flapstacks

🥞 Flex layout primitive for React & React Native

🥞 flapstacks

Flex layout primitive for React & React Native (wip)

📖 Table of Contents

• 🥞 flapstacks
  • 📖 Table of Contents
  • 👀 Background
    • Features
  • ⚙️ Install
  • 📖 Usage
    • Overridable styles
  • 📚 API
  • 💬 Contributing
  • 🪪 License

👀 Background

This package is a tiny wrapper around the Flexbox one-dimensional layout method to allow for a prop based styling API as seen in Styled System.

Features

• Works in React and React Native (wip)
• Flexible shorthand props
• TypeScript support with API docs
• 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:

npm install flapstacks

With yarn:

yarn add flapstacks

With pnpm:

pnpm add flapstacks

📖 Usage

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:

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.

💬 Contributing

Got an idea for a new feature? Found a bug? Contributions are welcome! Please open up an issue or make a pull request.

🪪 License

MIT © Tiaan du Plessis

flapstacks's Issues

Custom property shorthand support for gap

Instead of <Stack gap="var(--space-sm)" />:

<Stack gap="--space-sm" />
// Or even
<Stack gap="space-sm" />

Margin and padding shorthands

Makes sense to handle this at the layout primitive level.