DEV Community

Cover image for Aptor Is All You Need
Amir.H Ebrahimi
Amir.H Ebrahimi

Posted on • Updated on

Aptor Is All You Need



The dominant react-something packages are based on old-style class-based integration that includes a third-party and a react wrapper that defines new things for each existing API in that third party. The best available method is to bind a ref filling the integration gap through the react ref system.

We propose a new simple package, the react-aptor, based solely on integration mechanisms, removing the middle effect of react packages entirely.


Let’s say there comes a trending video package called doom.js, featured just recently on npm. The doom package has been developed in typescript compatible with all frameworks and libraries. Now the community tries to help the author and make integrated packages on their own 🙌️.

Let’s make it simple, doom can only play/pause a video for now. It might not be cool enough to win the "Breakthrough of the year”, but it is definitely one of the best 😄.

Then we are going to make a react package out of it, called react-doom. It is going to be something like this:

Enter fullscreen mode Exit fullscreen mode

Then users can play/pause the video with their UI using playerRef.current

Everything is fine, let’s add a new highly voted feature to doom.js to change the speed of the video.

Author starts coding
Boom 💥
The author finishes the feature
It is now running tests
All test passed 🕺
Doom.js is going to be published
OMG it is also compatible
The new minor version is coming …
Done 🆗

So let’s update our react-doom package and use the new 2x feature on our videos.
Published 25 days ago, Okay let’s check their issue, it must be under doing board
last interaction for the author is 2 months ago
So what, making another Old guy pc Meme!


Why should react wrapper block the development phase of a package?

Connect your doom.js to react-aptor then you have all the functionality.
Use a tiny wrapper around the connected component. Do every of the following you want

  • Trigger prop changes using useEffect
  • Change namings
  • Hoist full access reference to raw doom.js API using forwardRef

Let’s call this new react package raptor-doom.
raptor-doom is a simple, tiny piece that helps developers to use it independent of the react package itself.

So in the case of the 2x feature, the only thing which is needed is to update the doom.js package and use the rate feature out of the box.

<RaptorDoom isPlaying={isPlaying} ref={ref} />
<button onClick={() => {ref.current._doom.setRate(2)}}>
 speed up
Enter fullscreen mode Exit fullscreen mode

The react-aptor helps you to make this process as easy as one react hook call.

const Connector = (props, ref) => {
  const aptorRef = useAptor(ref, {
    // a function which returns a slice of doom.js apis
    // a function which instantiate doom.js player
    // anything to be used in both getAPI, instantiate
    params: props 

  // accessing node using returned ref
  return <div ref={aptorRef} />; 
Enter fullscreen mode Exit fullscreen mode

See examples: get connected to react using react-aptor within a minute.

See a raptor-howler a 1.04kB functional version of react-howler.

See a detailed documentation with lots of best practices here


react-aptor helps you to make functional, small, Forward Compatible packages within react.

Top comments (0)