Repository files navigation

svelte-flex

💪 A simple and reusable flexbox component for Svelte.

A simple and reusable flexbox component forSvelte.

• Sane defaults.
• Simple API.
• Reactive props.
• Minimal size.

Try me on CodeSandbox!

This package assumes you are using at least Svelte4.x, and that is the only major version which is actively tested. It may work in some older versions, however

This package requires at leastsvelte@3.46.2 to work, as it makes use of thestyle directives feature introduced in the3.46.x version.

This package is available on NPM, and you can install it withnpm oryarn:

npm install -D svelte-flexyarn add -D svelte-flex

Import theFlex component and use it in your Svelte project.

<script>importFlexfrom'svelte-flex';</script><Flex>  <div>Flexbox child!</div>  <div>Flexbox child!</div>  <div>Flexbox child!</div></Flex>

All props are optional (as they all have default values).

Check out thetest suite 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.

Any additional props you provide toFlex will be spread onto the root element. This includes custom CSS classes, which will be applied after the flex classes:

Input

<Flexclass="my-custom-class"aria-label="flex-boi"><span>Flex child</span></Flex>

HTML Output

<divclass="flex flex-direction--row flex-align--center flex-justify--center my-custom-class"aria-label="flex-boi"><span>Flex child</span></div>

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.

Feel free tofile an issue or open a pull request. Ensure that you add tests for any new functionality.

👌 Built byDave Lunny.