React - Side pane

Hello there, fine devs ! First post and first NPM package released into the wild 🚀🎉. In this article, I will present to you this new package:

RomainCoudour / react-side-pane

React component - Side pane

Motivation 🔥

This little project started at Aitenders as a more modern and nicer way to display data and propose additional actions to our users.

I am a full-stack dev working at Aitenders and we have several features that display a lot of data and often request multiple user interactions. The way we did things at first resulted into a bloated, non-fluid, definitely not user friendly and high cognitive complexity views. At that point, we decided to revamp our views to be more user-first. We decided to add a side panel to our component collection as an nice alternative to display data. Facing the lack of 'compliant' solution, I developed one.

What differs from another side panel lib is that we handle the overlapping of side panels/side panes. And at the moment, this package is mostly a react-right-side-pane 😄 (yup, it's a right-to-left only pane for now).

Thanks to Aitenders for letting me open-sourcing this component.

Live demo 🚀

Limits and open-sourcing ❤️

This package is built upon React Portals and React Transition Group. Which means you will need React >= v16.6.0. It is not supported on IE (any version). Regarding Portals, we will see at usage if we need to bring in an alternative. Everything you need is in the README.md.

I am well aware that is not going to revolutionize the world but nonetheless I am proud of my little package 😄. The repository is only at its beginning so if you want to contribute or if you are confronted to any limitation, feel free to fork or open an issue.

Hope you will like it as we do at Aitenders. Feedbacks and comments are more than welcome.
See you out there !

Comments

[Andrew Bone]

This is really nice, I love the stacking of side panels. I think the only thing that's missing is keyboard support. So that's ESC to close and also trapping the tab key inside the side panel. 😁

I know it's a side panel but it's the same as a modal when it comes to ARIA.
w3.org/TR/wai-aria-practices-1.1/e...

I wrote a post a while ago about making an ARIA compliant modal popup I don't know if you'd find that helpful but here it is.

React: Using portals to make a modal popup

Andrew Bone ・ Aug 7 '20 ・ 4 min read

#react #javascript #tutorial

[Romain Coudour]

Hi there and thanks for the feedback.

a11y and keyboard controls are planned. Didn't have to time tackle that yet but I'll definitely take a look at your post while doing it 😄 !
EDIT: a11y and keyboard controls: DONE