https://github.com/a-type/react-space

An attempt to extract a generic 2d spatial canvas primitive in React
https://github.com/a-type/react-space

Last synced: about 1 year ago
JSON representation

An attempt to extract a generic 2d spatial canvas primitive in React

• Host: GitHub
• URL: https://github.com/a-type/react-space
• Owner: a-type
• License: other
• Created: 2024-09-07T21:40:31.000Z (almost 2 years ago)
• Default Branch: main
• Last Pushed: 2024-12-23T01:58:36.000Z (over 1 year ago)
• Last Synced: 2025-02-05T06:12:16.097Z (over 1 year ago)
• Language: TypeScript
• Homepage: https://a-type.github.io/react-space/
• Size: 551 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

          
# 🌌 @a-type/react-space

An attempt to extract a generic 2d spatial canvas primitive in React.

I keep re-inventing 2D canvas primitives. I feel like I've gotten pretty decent at it, but it's a hard problem to abstract well.

This is my first attempt at a general-purpose 2D "infinite" canvas abstraction. "Infinite" in quotes because it's not logically infinite, it's in fact capped, the cap can just be very very high without performance impact (afaik).

`pnpm add @a-type/react-space`

See `./src/stories` for working examples. Not going to attempt to document here until the usage is stable.

Unlike other 2D canvas that I know of, this library automatically tracks the size of object elements within the canvas, so it's much easier to do things like intersection queries. Included out of the box is a `` component, too. The main `Canvas` has a `selections` property which tracks selected objects by ID. So, the library is kind of opinionated about some common concepts. This may prove to be unfortunate for general usage, but tbh this is mostly for me, anyway.

## A note about licensing

The code as represented here is licensed CC-NC. You cannot use it for commercial purposes.

If you would like to use this library for commercial purposes, please contact me directly.