{"library":"react-kapsule","title":"React Kapsule Wrapper","description":"react-kapsule is a utility library designed to integrate Kapsule-style web components into React applications. It provides a higher-order component, `fromKapsule`, which acts as a bridge, transforming a Kapsule component definition (often a closure-based functional component following Mike Bostock's reusable charts pattern) into a standard React component. The current stable version is 2.5.7, with the last publish being approximately a year ago, indicating a mature and stable library rather than one with frequent, breaking updates. It ships with TypeScript types, ensuring robust type checking for consumers. Its core utility lies in abstracting the imperative nature of Kapsule components, allowing them to be declaratively used within React's component tree, handling prop updates and method invocations transparently. This enables developers to leverage existing Kapsule components or build new ones with Kapsule, while still utilizing React for their main application UI.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-kapsule"],"cli":null},"imports":["import fromKapsule from 'react-kapsule';","const fromKapsule = require('react-kapsule');","import Kapsule from 'kapsule';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React, { useRef, useEffect } from 'react';\nimport ReactDOM from 'react-dom/client';\nimport Kapsule from 'kapsule';\nimport fromKapsule from 'react-kapsule';\n\n// Define a simple Kapsule component\nconst myKapsuleComponent = Kapsule({\n  props: {\n    message: { default: 'Hello' },\n    count: { default: 0 }\n  },\n  methods: {\n    increment: function(state) { state.count++; },\n    setMessage: function(state, msg) { state.message = msg; }\n  },\n  init(domNode, state) {\n    state.container = document.createElement('div');\n    domNode.appendChild(state.container);\n  },\n  update(state) {\n    state.container.innerHTML = `<span>${state.message} from Kapsule! Count: ${state.count}</span>`;\n  }\n});\n\n// Wrap the Kapsule component for React\nconst MyReactKapsuleComponent = fromKapsule(myKapsuleComponent, {\n  methodNames: ['increment', 'setMessage'] // Expose Kapsule methods as React component methods\n});\n\nfunction App() {\n  const kapsuleRef = useRef(null);\n\n  useEffect(() => {\n    const interval = setInterval(() => {\n      if (kapsuleRef.current) {\n        (kapsuleRef.current as any).increment(); // Call exposed Kapsule method\n      }\n    }, 1000);\n    return () => clearInterval(interval);\n  }, []);\n\n  return (\n    <div>\n      <h1>React Kapsule Example</h1>\n      <MyReactKapsuleComponent\n        ref={kapsuleRef}\n        message=\"Greetings\"\n        count={10}\n      />\n      <button onClick={() => (kapsuleRef.current as any)?.setMessage('New message!')}>\n        Change Message\n      </button>\n    </div>\n  );\n}\n\nconst rootElement = document.getElementById('root');\nif (rootElement) {\n  const root = ReactDOM.createRoot(rootElement);\n  root.render(<App />);\n} else {\n  console.error(\"Root element not found\");\n}","lang":"typescript","description":"This quickstart demonstrates wrapping a Kapsule component with `fromKapsule`, passing initial props, exposing Kapsule methods, and interacting with them via a React ref to update the component imperatively.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}