name: Getting Started route: /
A extremely lightweight package to build amazing flex components.
Features
Documentation
Visit https://react-flexy.netlify.app/
Motivation
One of the things nowadays I enjoy is Flexbox. And when it comes with React we can build agnostic components in such an amazing way that leverage the full potential of componentization.
However, dealing with flex properties and build reusable components becomes hard.
It leads to inconsistencies throughout the project. Not to mention the amount of code which is repetitive over the place. Another aspect to mention is sometimes you'd like to customize a component but the API exposed does not allow to do that and you have to go to the implementation details and modify it as you wish. That potentially could break other consumers.
Then you can build those components which are let say 'private' like layout holders which just suit that case and you do not want to build a reusable namish component for that. The problem is when another developer tries to visualize the entire picture by reading the markup.
And guess what? ain't can get any clue about it. No good choice.
This is how Flexy was born, to overcome those situations by giving a meaningful way to build amazing composable UI components.
Installation
npm install react-flexy
Quick start
; const Horizontally = { return <FlexyHorizontal center spaceAll="m"> <h1>Usage</h1> <Content /> </FlexyHorizontal> ;}; const Vertically = { return <FlexyVertical spaceAll="m"> <h1>Usage</h1> <Content /> </FlexyVertical> ;};Composable
; const Composable = { return <FlexyHorizontal center spaceAll="m"> <h1>Title</h1> <FlexyVertical center spaceAll="m"> <FlexyHorizontal center spaceAll="m"> <h1>Another title</h1> <FlexyVertical center spaceAll="m"> <h1>Other title</h1> <Content /> </FlexyVertical> </FlexyHorizontal> </FlexyVertical> </FlexyHorizontal> ;};Configurable
; // You could customize all the spaces,// the left ones will filled with the default configconst customTokens = spaceXS: "1rem" spaceS: "2rem" spaceM: "3rem" spaceL: "4rem"; // Probably you'd like to handle the config in a theme React Contextconst Configurable = { return <FlexyHorizontal config=customTokens center spaceAll="m"> <h1>Title</h1> </FlexyHorizontal> ;};Style extension
; const StyleExtension = { return <FlexyHorizontal addStyle= height: "300px" center spaceAll="3xl"> <h1>Title</h1> </FlexyHorizontal> ;};