1.0.0 • Published 2 years ago
flapstacks v1.0.0
🥞 flapstacks
Flex layout primitive for React & React Native (wip)
📖 Table of Contents
👀 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
1.0.0
2 years ago