Tutorials Overview

The minimal first-class API connector for react

Why

Most packages are developed separately in JavaScript (typescript), increasing generality of being library/framework agnostic.

Connecting vanilla third parties to react is not a routine task especially those that need to change the DOM or to trigger render phase. On the other hand, these packages might be developed by different teams, hence development progress can be one step behind of the original or even be terminated at any time. Also, wrong abstraction or bad design patterns may interrupt the progress of these react-* wrapper packages.

Other concern on react-* packages:

Finding DOM nodes by ReactDOM.findDOMNode
Extensively usage of memorization to improve performance or prevent extra re-renders
Other duplication layer for all API definition in react that increase the project size
Rely on a global scope (e.g. window) for internal settings (making it impossible to have more than one instance)
backward compatible updates of the base package need another update for react-* package

react-aptor 💪

We strive to solve all mentioned problems at once and for all.

Features

Small
Manageable
React-ish
Simple
Typescript

Zero-dependency with less than 1 kilobyte in size (327 B 😱) react-aptor

installation

# Yarn
yarn add react-aptor

# Npm
npm install react-aptor

Usage

connector.jsx

import useAptor from 'react-aptor'
import AudioPlayer from 'imaginary-audio-player'

const Connector = React.forwardRef((props, ref) => {
  const aptorRef = useAptor(ref, {
    instantiate: div => new AudioPlayer(div, props.sound),

    getAPI: player => ({
      toggle: () => {
        if (!player) return

        if (player.isPlaying) player.pause()
        else player.play()
      },
    }),
  })

  return <div ref={aptorRef} />
})

consumer.jsx

const App = () => {
  const ref = React.useRef()

  return (
    <div>
      <Connector ref={ref} sound="imaginary sound" />
      <button onClick={ref.current?.toggle}>toggle audio</button>
    </div>
  )
}