{"library":"react-aptor","title":"React Aptor","description":"React Aptor is a minimal API connector for React applications, currently at version 2.0.0. It provides a structured and opinionated way to integrate vanilla JavaScript third-party libraries, especially those that interact directly with the DOM, into React components. The library addresses common integration challenges such as finding DOM nodes, preventing excessive re-renders, and managing API lifecycles without relying on global scope or introducing unnecessary abstraction layers. Emphasizing a \"zero-dependency,\" \"tree-shakeable,\" and \"side-effect free\" design, React Aptor boasts a minimal bundle size (less than 1 kilobyte). While a strict release cadence is not specified, recent updates, including the significant v2.0.0 release, indicate active development focused on improving the build process, testing infrastructure, and project consistency. Its core differentiator is empowering developers with full control over their API definitions and their connection to React, aiming to be anti-pattern-free within the React ecosystem.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-aptor"],"cli":null},"imports":["import { useAptor } from 'react-aptor'","import type { AptorInstance } from 'react-aptor'","import type { AptorAPI } from 'react-aptor'"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React, { useRef, useEffect, useState } from 'react';\nimport { useAptor } from 'react-aptor';\n\n// 1. Define the instantiate function for a dummy third-party library\n// Let's imagine a simple counter library that updates a DOM element.\nclass CounterLib {\n  private count: number = 0;\n  private displayElement: HTMLElement;\n\n  constructor(node: HTMLElement, initialCount: number = 0) {\n    this.displayElement = node;\n    this.count = initialCount;\n    this.render();\n  }\n\n  increment = () => {\n    this.count++;\n    this.render();\n  };\n\n  decrement = () => {\n    this.count--;\n    this.render();\n  };\n\n  getCount = () => this.count;\n\n  destroy = () => {\n    this.displayElement.innerHTML = ''; // Clean up DOM\n    console.log('CounterLib destroyed');\n  };\n\n  private render = () => {\n    this.displayElement.innerHTML = `Current count: ${this.count}`;\n  };\n}\n\nconst instantiateCounter = (node: HTMLElement, initialCount: number) => {\n  return new CounterLib(node, initialCount);\n};\n\n// 2. Define the get API function\nconst getCounterAPI = (instance: CounterLib) => ({\n  increment: instance.increment,\n  decrement: instance.decrement,\n  getCount: instance.getCount,\n});\n\n// 3. Connect API to react by useAptor\nfunction CounterComponent() {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const { api: counterApi, instance: counterInstance, isReady } = useAptor(\n    instantiateCounter,\n    getCounterAPI,\n    containerRef, // The node for the third-party lib\n    [0] // params for instantiateCounter: initialCount\n  );\n\n  useEffect(() => {\n    if (isReady && counterApi) {\n      console.log('Counter API is ready, current count:', counterApi.getCount());\n    }\n  }, [isReady, counterApi]);\n\n  return (\n    <div style={{ padding: '20px', border: '1px solid #ccc' }}>\n      <h2>React Aptor Counter Example</h2>\n      <div ref={containerRef} style={{ marginBottom: '10px' }}>\n        {/* CounterLib will render here */}\n      </div>\n      {isReady && counterApi ? (\n        <div>\n          <button onClick={counterApi.increment} style={{ marginRight: '10px' }}>Increment</button>\n          <button onClick={counterApi.decrement}>Decrement</button>\n          <p>Count from React state: {counterApi.getCount()}</p>\n        </div>\n      ) : (\n        <p>Loading Counter...</p>\n      )}\n    </div>\n  );\n}\n\n// Example usage in an App component\nconst App = () => <CounterComponent />;\nexport default App;\n","lang":"typescript","description":"Demonstrates connecting a custom 'CounterLib' third-party library to a React component using `useAptor` by defining `instantiateCounter` and `getCounterAPI` functions, then consuming the exposed API.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}