{"id":29930389,"url":"https://github.com/vasturiano/react-kapsule","last_synced_at":"2025-08-02T16:14:51.960Z","repository":{"id":40516530,"uuid":"104009702","full_name":"vasturiano/react-kapsule","owner":"vasturiano","description":"React wrapper for kapsule-style web components","archived":false,"fork":false,"pushed_at":"2025-03-21T15:46:50.000Z","size":413,"stargazers_count":8,"open_issues_count":2,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-07-29T10:43:17.445Z","etag":null,"topics":["kapsule","react-hoc","reusable-components","web-component"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/vasturiano.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-09-19T01:19:05.000Z","updated_at":"2025-03-21T15:46:54.000Z","dependencies_parsed_at":"2024-12-12T23:21:22.999Z","dependency_job_id":"71b34687-d31d-41b2-8152-964e363442a8","html_url":"https://github.com/vasturiano/react-kapsule","commit_stats":{"total_commits":96,"total_committers":2,"mean_commits":48.0,"dds":0.02083333333333337,"last_synced_commit":"76fd620b3fee08e09a487ef5074b3b777a546543"},"previous_names":[],"tags_count":43,"template":false,"template_full_name":null,"purl":"pkg:github/vasturiano/react-kapsule","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vasturiano%2Freact-kapsule","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vasturiano%2Freact-kapsule/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vasturiano%2Freact-kapsule/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vasturiano%2Freact-kapsule/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vasturiano","download_url":"https://codeload.github.com/vasturiano/react-kapsule/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vasturiano%2Freact-kapsule/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":268416772,"owners_count":24246979,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-02T02:00:12.353Z","response_time":74,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["kapsule","react-hoc","reusable-components","web-component"],"created_at":"2025-08-02T16:14:51.395Z","updated_at":"2025-08-02T16:14:51.939Z","avatar_url":"https://github.com/vasturiano.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"react-kapsule\n=============\n\n[![NPM package][npm-img]][npm-url]\n[![Build Size][build-size-img]][build-size-url]\n[![NPM Downloads][npm-downloads-img]][npm-downloads-url]\n\nA React wrapper for [kapsule](https://github.com/vasturiano/kapsule)-style web components.\n\n## Quick start\n\n```js\nimport fromKapsule from 'react-kapsule';\n```\nor using a *script* tag\n```html\n\u003cscript src=\"//cdn.jsdelivr.net/npm/react-kapsule\"\u003e\u003c/script\u003e\n```\n\n## Usage example\n\n### Given a kapsule component:\n```js\nconst myKapsule = Kapsule({ \n  props: {\n    prop1: {},\n    prop2: {}\n  },\n  ...\n});\n```\n\n### Render it in React:\n```jsx\nconst MyKapsuleComponent = fromKapsule(myKapsule);\n\nReactDOM.render(\n  \u003cMyKapsuleComponent\n    prop1=\"a value\"\n    prop2=\"another value\"\n  /\u003e,\n  myDOMElement\n);\n```\n\n## API reference\n\n```js\nconst MyComponent = fromKapsule(kapsuleComponent, options);\n```\n\n### Returns\n\nA React component that includes the methods of the kapsule component available as props.\n\n### Arguments\n\n* kapsuleComponent\n\nAny closure based functional component which accepts prop changes as functional methods. Following the spec in [reusable charts pattern](https://bost.ocks.org/mike/chart/). Can be conveniently defined using the [Kapsule](https://github.com/vasturiano/kapsule) framework. \n\n* options\n\n An object with configuration options that can be used to define the React component. For example:\n ```js\n {\n   wrapperElementType: 'span'\n }\n ```\n \n| Option | Type | Default | Description |\n| --- | :--: | :--: | --- |\n| \u003cb\u003ewrapperElementType\u003c/b\u003e | \u003ci\u003estring\u003c/i\u003e or \u003ci\u003eReact component\u003c/i\u003e| `'div'` | The type of DOM element used by the underlying [React createElement](https://reactjs.org/docs/react-api.html#createelement) to mount the component. Can be either a tag name string (such as `'div'` or `'span'`) or a [React component](https://reactjs.org/docs/components-and-props.html) type (a class or a function). |\n| \u003cb\u003enodeMapper\u003c/b\u003e | \u003ci\u003efunction\u003c/i\u003e | `node =\u003e node` | A mapping function that allows to convert the DOM node into an object understood by the kapsule component. |\n| \u003cb\u003emethodNames\u003c/b\u003e | \u003ci\u003earray of strings\u003c/i\u003e | `[]` | The list of kapsule [component methods](https://github.com/vasturiano/kapsule#methods--methodname-functionstate-args-----) that should be available as React component bound methods, instead of direct props. Generally these methods will be called via the component `ref`, i.e. `myComponentRef.current.myMethod(...)`. |\n| \u003cb\u003einitPropNames\u003c/b\u003e | \u003ci\u003earray of strings\u003c/i\u003e | `[]` | The list of props that are intended to be passed as [configuration options](https://github.com/vasturiano/kapsule#generation) to the kapsule component's instantiation call. Modifying the values of these props after the initial mount of the React component will have no effect. |\n\n\n[npm-img]: https://img.shields.io/npm/v/react-kapsule\n[npm-url]: https://npmjs.org/package/react-kapsule\n[build-size-img]: https://img.shields.io/bundlephobia/minzip/react-kapsule\n[build-size-url]: https://bundlephobia.com/result?p=react-kapsule\n[npm-downloads-img]: https://img.shields.io/npm/dt/react-kapsule\n[npm-downloads-url]: https://www.npmtrends.com/react-kapsule\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvasturiano%2Freact-kapsule","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvasturiano%2Freact-kapsule","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvasturiano%2Freact-kapsule/lists"}