@threlte/flex

[grischaerbe]

@threlte/flex

This package will introduce a wrapper for yoga-layout.

Features

• <Flex> and <Box> components
• Automatically centered anchor if a child is not a <Box> component (DOM anchors are upper-left aligned whereas Three.js object anchors are centered)
• Full type support on props
• prop setter architecture makes it easy to type props
• A class parser can be introduced to use a class-based syntax as opposed to individual props, a parser for tailwind-like classes is included
• Slot props and bindings to force a layout reflow
• The reflow is batched and will never happen more than once per frame

Examples

The package contains a SvelteKit app with examples located at the route '/', run pnpm dev at packages/flex to get started.

Bildschirmaufnahme.2023-09-28.um.12.58.46.mp4

Credits

Some calculations are taken from react-three-flex, thanks.

[stackblitz]

Run & review this pull request in StackBlitz Codeflow.

[changeset-bot]

🦋 Changeset detected

Latest commit: 633c9e4

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@threlte/flex	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
threlte	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Sep 28, 2023 0:18am

[grischaerbe]

Because changesets is not allowing us to do an alpha release only for this package, we'll release this into the wild without a documentation. As long as 0.1.0 is not reached this package is considered alpha and likely to break anytime. Use at your own risk.