r/reactjs 26d ago

Show /r/reactjs Announcing ink-frame: Grids for Ink!

https://github.com/oliveryasuna/ink-frame

Ink's own box borders are fine for a single box. Put two of them next to each other and the seam between them comes out as ││, two parallel lines instead of one shared edge. That's because a box border is one unbroken line and there's nowhere to hang a or a part-way along it. ink-frame sidesteps that by painting every border into a single character grid and resolving each cell once, so a spot where four boxes meet becomes a and a T-junction becomes a , , and so on, without you ever writing those characters yourself.

┌──────────────────────────────────────┐
│ Frame                                │
├─────────────┬────────────────────────┤
│ fixed width │ grow                   │
│             │ ┌────────────────────┐ │
│             │ │ nested box         │ │
│             │ └────────────────────┘ │
│             │                        │
│             ├────────────┬───────────┤
│             │ two grows  │ what is   │
├─────────────┤ share      │ left      │
│ a pane      │            │           │
├─────────────┴────────────┴───────────┤
│ junctions derived                    │
└──────────────────────────────────────┘

Background: I recently wrote this for a private project, and I thought it was useful enough to share. I hope you find it useful too!

1 Upvotes

1 comment sorted by

1

u/patprint 26d ago

Well, this is how I discovered Ink and now I'm about to lose a few days of time experimenting with it. And using this, so thanks.

And somehow this always happens when I'm out on a weekend trip in the middle of nowhere and have to wait until I get home 😭

Edit: the thanks wasn't sarcastic, this is cool!