This repository implements the principles of Every Layout in React and React Native, offering a collection of components designed for efficient and responsive layouts.
- Box: Provides padding and border control for its content.
- Center: Aligns its child both horizontally and vertically in its parent.
- Cluster: Arranges items with a consistent space between them.
- Cover: Allows for a full-viewport-height presentation with header and footer.
- Frame: Places an item in the center with an optional border.
- Icon: An inline element for inserting icons with optional text.
- Imposter: Breaks an element out of its container to cover another.
- Reel: For horizontally scrolling lists of items.
- Sidebar: Creates a main content area with a sidebar.
- Stack: Manages vertical spacing between its child elements.
- Switcher: Switches between a horizontal and vertical layout depending on the available space.
The Grid isn't implemented because can be built with Tamagui components.
Each component is designed with simplicity and flexibility in mind, making it easy to integrate into your existing project. They can be customized with props to fit various design requirements and work seamlessly across web and mobile platforms.
This repo aims to provide developers with a toolkit for creating responsive, consistent layouts with ease, following the Every Layout philosophy.
Feel free to explore, contribute, and raise issues or suggestions to improve these components! 🚀🎨
Requirements:
- Install Yarn package manager. Then install all the packages with
yarn add. - To make commits, we use run
yarn run commit. To do so, installnpm install -g commitizento so.