orbital-list 🪐 - My first React Library

A while ago I wrote a web application that lets you see your team and coworkers on a circular clock.

This circular interface is the core feature of whena.re to me. Time, especially the time of day, goes round and round. It's more natural and more intuitive to represent it on a circle.

This design took me hours and hours to implement. I skipped the data visualization libraries because most of them rely on an abstraction that is data-oriented. It wasn't ideal here.

For example, if I have a list of users, in React you'd go with something like this:

<ul>
  <li>Tom (GMT, 12:02)</li>
  <li>Martine (UTC-2, 14:02)</li>
</ul>

// which you write:

<ul>
  {users.map(user => <li>{user.name} ({user.timezone} - {user.time}</li>)}
</ul>

Whereas in libraries such as d3, you have to convert your data into "pie chart data" and setup some sort of rendering engine. Like in this example.

In the end, I wrote a library of components that would let me represent circular interfaces. It generates a "circular context" and position components inside this context.

It looks like having HTML lists displayed as orbits.

<OrbitalList>
    <Dial color='#1f2041' />
    <Orbit color='rgba(244, 205, 205, 1)' radius={0.15} />
    <Slice
        length={0.5}
        angleStart={180}
        angleEnd={202.5}
        color='blue'
    />
    <Place
        angle={180}
        distance={0.8}
        style={{ color: '#ed254e', fontSize: '1.2rem', fontWeight: 'bold' }}
    >
        <button>Hello</button>
    </Place>
</OrbitalList>

Today I release this as an open-source library. It's small, the code is embarrassing, but you know what they say...

"If you're not embarrassed, you've launched too late."

I'd be happy to hear from you, if the approach makes sense and if you find the demo and library pleasant to use.

The demo is here:
https://orbital-list.laurentsenta.com/

The GitHub repository is here:
https://github.com/laurentsenta/orbital-list