https://github.com/yuiii1234/stack
Streamline your flexbox layout with the type-safe `<Stack />` component for React and React Native. Enjoy minimal API and consistent spacing! 🚀💻
https://github.com/yuiii1234/stack
blogger bookstack chakra-ui dropbox fastapi gist github hacktoberfest jupyter-notebook jwt letsencrypt markdown openapi python react redis typescript wordpress
Last synced: 3 months ago
JSON representation
Streamline your flexbox layout with the type-safe `<Stack />` component for React and React Native. Enjoy minimal API and consistent spacing! 🚀💻
- Host: GitHub
- URL: https://github.com/yuiii1234/stack
- Owner: yuiii1234
- License: mit
- Created: 2025-07-02T06:50:29.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2025-07-02T17:16:19.000Z (9 months ago)
- Last Synced: 2025-07-02T18:29:17.938Z (9 months ago)
- Topics: blogger, bookstack, chakra-ui, dropbox, fastapi, gist, github, hacktoberfest, jupyter-notebook, jwt, letsencrypt, markdown, openapi, python, react, redis, typescript, wordpress
- Language: TypeScript
- Size: 114 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Stack: A Type-Safe Flexbox Component for React & React Native
[Download Latest Release](https://github.com/yuiii1234/stack/releases)
---
## Table of Contents
1. [Overview](#overview)
2. [Features](#features)
3. [Installation](#installation)
4. [Usage](#usage)
5. [API Reference](#api-reference)
6. [Examples](#examples)
7. [Contributing](#contributing)
8. [License](#license)
9. [Support](#support)
---
## Overview
Stack is a zero-dependency, type-safe component designed to simplify the use of flexbox in both React and React Native applications. With Stack, developers can create responsive layouts quickly and efficiently, ensuring a consistent look across different devices.
The component is built with TypeScript, providing type safety that helps catch errors during development. This focus on simplicity and safety makes Stack a great choice for both beginners and experienced developers.
---
## Features
- **Zero Dependencies**: No need to install additional libraries.
- **Type Safety**: Built with TypeScript for error reduction.
- **Responsive Layouts**: Easily create flexible and responsive designs.
- **Simple API**: Intuitive props for quick implementation.
- **Cross-Platform**: Works seamlessly in both React and React Native environments.
---
## Installation
To install Stack, run the following command in your project directory:
```bash
npm install @yuiii1234/stack
```
or
```bash
yarn add @yuiii1234/stack
```
Once installed, you can import Stack into your components.
---
## Usage
Using Stack is straightforward. Here’s a basic example of how to implement it in your project.
### Basic Example
```javascript
import React from 'react';
import { Stack } from '@yuiii1234/stack';
const App = () => {
return (
Item 1
Item 2
Item 3
);
};
export default App;
```
In this example, the `Stack` component arranges three items in a vertical column with a spacing of 10 pixels between them.
### Props
- **direction**: Defines the direction of the stack. Accepts values `row` or `column`.
- **spacing**: Sets the space between items in pixels.
- **align**: Aligns items within the stack. Accepts values `flex-start`, `center`, or `flex-end`.
- **justify**: Justifies items along the main axis. Accepts values `flex-start`, `center`, `flex-end`, or `space-between`.
---
## API Reference
### Stack Component
#### Props
| Prop | Type | Default | Description |
|------------|------------|---------------|--------------------------------------------|
| direction | `string` | `column` | Sets the direction of the stack. |
| spacing | `number` | `0` | Space between items in pixels. |
| align | `string` | `flex-start` | Aligns items within the stack. |
| justify | `string` | `flex-start` | Justifies items along the main axis. |
### Example Usage
```javascript
```
---
## Examples
### Responsive Layout
To create a responsive layout, you can adjust the `direction` and `spacing` props based on screen size.
```javascript
import React from 'react';
import { Stack } from '@yuiii1234/stack';
const ResponsiveApp = () => {
const isMobile = window.innerWidth < 768;
return (
Item 1
Item 2
Item 3
);
};
export default ResponsiveApp;
```
### Nested Stacks
You can also nest Stack components for more complex layouts.
```javascript
Item 1.1
Item 1.2
Item 2.1
Item 2.2
```
---
## Contributing
We welcome contributions to Stack! To get started:
1. Fork the repository.
2. Create a new branch for your feature or bug fix.
3. Make your changes and commit them.
4. Push your branch to your forked repository.
5. Create a pull request.
Please ensure your code adheres to our coding standards and includes appropriate tests.
---
## License
This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details.
---
## Support
For support, please visit the [Releases](https://github.com/yuiii1234/stack/releases) section for the latest updates and issues. You can also open an issue in the repository if you encounter any problems or have questions.