Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

react
api
javascript
communitycreator

What is aptor in React Javascript?

Amirhossein

TL;DR

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, that removes the middle effect of React packages entirely.

Story

Let’s say there is a trending video package called doom.js (recently featured on NPM). The doom package has been developed in TypeScript and is compatible with all frameworks and libraries. So, 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.

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

<ReactDoom 
    src={'video-url'}
    isPlaying={false} 
    ref={playerRef}
/>

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

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

  1. Author starts coding

  2. Author finishes the feature

  3. Author runs tests

  4. All tests passed

  5. doom.js is now going to be published (it is also compatible, and the new minor version is coming soon)

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 the “doing” board, as the last interaction for the author was “2 months ago”. So, it seems that what we expected to get was different from what we got, as we did not expect a single update package command from the React-doom.

Aptor

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

Connect your doom.js to react-aptor to have all the functionality.

Use a tiny wrapper around the connected component and do each of the following:

  • Trigger prop changes using useEffect
  • Change naming
  • 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 use it independent of the React package itself. So, in the case of the 2x feature, it is only thing that is needed 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
</button>

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
    getAPI, 
    // a function which instantiate doom.js player
    instantiate, 
    // anything to be used in both getAPI, instantiate
    params: props 
  });

  // accessing node using returned ref
  return <div ref={aptorRef} />; 
};

You can see examples here on how to connect to React using react-aptor within a minute.

Take a look at raptor-howler, a 1.04kB functional version of react-howler.

Conclusion

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

RELATED TAGS

react
api
javascript
communitycreator
RELATED COURSES

View all Courses

Keep Exploring