Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/himynameisdave/svelte-flex
💪 A simple and reusable flexbox component for Svelte
https://github.com/himynameisdave/svelte-flex
flexbox layout-component svelte svelte-component svelte-flexbox ui-component
Last synced: 20 days ago
JSON representation
💪 A simple and reusable flexbox component for Svelte
- Host: GitHub
- URL: https://github.com/himynameisdave/svelte-flex
- Owner: himynameisdave
- License: mit
- Created: 2020-03-30T22:54:27.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2024-11-08T23:23:12.000Z (about 1 month ago)
- Last Synced: 2024-11-15T13:45:46.198Z (28 days ago)
- Topics: flexbox, layout-component, svelte, svelte-component, svelte-flexbox, ui-component
- Language: TypeScript
- Homepage: https://bit.ly/svelte-flex
- Size: 1.88 MB
- Stars: 78
- Watchers: 3
- Forks: 5
- Open Issues: 14
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
- awesome-svelte - svelte-flex - A simple and reusable flexbox component for Svelte. (UI Components / Grid)
- awesome-starred - himynameisdave/svelte-flex - 💪 A simple and reusable flexbox component for Svelte (svelte)
README
svelte-flex
💪 A simple and reusable flexbox component for Svelte.
---
A simple and reusable flexbox component for [Svelte](https://svelte.dev/).
- Sane defaults.
- Simple API.
- Reactive props.
- Minimal size.
[**Try me on CodeSandbox!**](https://codesandbox.io/s/svelte-flex-5s45y)
### Requirements
This package assumes you are using at least Svelte `4.x`, and that is the only major version which is actively tested. It may work in some older versions, however
This package requires at least `[email protected]` to work, as it makes use of the [style directives](https://github.com/sveltejs/rfcs/pull/42) feature introduced in the [`3.46.x` version](https://github.com/sveltejs/svelte/blob/master/CHANGELOG.md#3462).
### Installation
This package is available on NPM, and you can install it with `npm` or `yarn`:
```
npm install -D svelte-flex
yarn add -D svelte-flex
```
### Usage
Import the `Flex` component and use it in your Svelte project.
```svelte
import Flex from 'svelte-flex';
Flexbox child!
Flexbox child!
Flexbox child!
```
#### Props
All props are optional (as they all have default values).
**Prop** | **Possible Values** | **Default Value**
---|---|---
[`direction`](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction) | `'row'` \| `'column'` | `'row'`
[`align`](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items) | `'start'` \| `'center'` \| `'end'` \| `'stretch'` | `'center'`
[`justify`](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content) | `'start'` \| `'center'` \| `'end'` \| `'around'` \| `'between'` \| `'evenly'` | `'center'`
[`reverse`](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction#Result) | `true` \| `false` | `false`
Check out the [test suite](https://github.com/himynameisdave/svelte-flex/blob/master/src/__tests__/Flex.spec.js#L11) if you're unsure what CSS styles are applied by these props.
The props are reactive, meaning that if they are dynamically updated, the component will update in response.
#### Additional Props
Any additional props you provide to `Flex` will be spread onto the root element. This includes custom CSS classes, which will be applied after the flex classes:
**Input**
```html
Flex child
```
**HTML Output**
```html
Flex child
```
### "Why does this exist?"
I get plenty of comments asking about why this package exists and what value it adds, especially when you could just add your own flex styles and be done with it. This package helps do this in a reusable way so you don't have to think about it, as well as making it easier for folks who may not be as familiar with working with flexbox. Just a reminder that _✨you don't have to use this package✨_ if it doesn't suit your needs.
### Contributing
Feel free to [file an issue](https://github.com/himynameisdave/svelte-flex/issues/new) or open a pull request. Ensure that you add tests for any new functionality.
---
_👌 Built by [Dave Lunny](http://himynameisdave.com)._