# react-kapsule

> A React wrapper for Kapsule-style web components

Latest version **2.6.0** (published 2026-06-17) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-kapsule
pnpm add react-kapsule
yarn add react-kapsule
bun add react-kapsule
```

## Health

**Score 55/100 (C)** — status: active.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 2.6.0 |
| Published | 2026-06-17 |
| First published | 2017-09-19 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=12 |
| Dependencies | 1 |
| Unpacked size | 33.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 9 |
| Author | Vasco Asturiano |
| Maintainers | vasturiano |
| Keywords | react, wrapper, kapsule, web, component |

## Links

- npm: https://www.npmjs.com/package/react-kapsule
- Repository: https://github.com/vasturiano/react-kapsule
- Issues: https://github.com/vasturiano/react-kapsule/issues
- npm.io page: https://npm.io/package/react-kapsule

## Dependencies (1)

- [jerrypick](https://npm.io/package/jerrypick.md) ^1.1.2

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 2.6.0 (latest) — 2026-06-17
- 2.5.7 — 2025-03-21
- 2.5.6 — 2024-12-13
- 2.5.5 — 2024-12-13
- 2.5.4 — 2024-12-12
- 2.5.3 — 2024-12-12
- 2.5.2 — 2024-12-07
- 2.5.1 — 2024-12-05
- 2.5.0 — 2024-11-13
- 2.4.2 — 2024-11-13
- 2.4.1 — 2024-10-03
- 2.4.0 — 2023-02-16
- 2.3.1 — 2023-02-08
- 2.3.0 — 2023-02-06
- 2.2.6 — 2022-11-03
- … 34 more at https://npm.io/package/react-kapsule/versions

## README

react-kapsule
=============

[![NPM package][npm-img]][npm-url]
[![Build Size][build-size-img]][build-size-url]
[![NPM Downloads][npm-downloads-img]][npm-downloads-url]

A React wrapper for [kapsule](https://github.com/vasturiano/kapsule)-style web components.

## Quick start

```js
import fromKapsule from 'react-kapsule';
```
or using a *script* tag
```html
<script src="//cdn.jsdelivr.net/npm/react-kapsule"></script>
```

## Usage example

### Given a kapsule component:
```js
const myKapsule = Kapsule({ 
  props: {
    prop1: {},
    prop2: {}
  },
  ...
});
```

### Render it in React:
```jsx
const MyKapsuleComponent = fromKapsule(myKapsule);

ReactDOM.render(
  <MyKapsuleComponent
    prop1="a value"
    prop2="another value"
  />,
  myDOMElement
);
```

## API reference

```js
const MyComponent = fromKapsule(kapsuleComponent, options);
```

### Returns

A React component that includes the methods of the kapsule component available as props.

### Arguments

* kapsuleComponent

Any 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. 

* options

 An object with configuration options that can be used to define the React component. For example:
 ```js
 {
   wrapperElementType: 'span'
 }
 ```
 
| Option | Type | Default | Description |
| --- | :--: | :--: | --- |
| <b>wrapperElementType</b> | <i>string</i> or <i>React component</i>| `'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). |
| <b>nodeMapper</b> | <i>function</i> | `node => node` | A mapping function that allows to convert the DOM node into an object understood by the kapsule component. |
| <b>methodNames</b> | <i>array of strings</i> | `[]` | 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(...)`. |
| <b>initPropNames</b> | <i>array of strings</i> | `[]` | 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. |


[npm-img]: https://img.shields.io/npm/v/react-kapsule
[npm-url]: https://npmjs.org/package/react-kapsule
[build-size-img]: https://img.shields.io/bundlephobia/minzip/react-kapsule
[build-size-url]: https://bundlephobia.com/result?p=react-kapsule
[npm-downloads-img]: https://img.shields.io/npm/dt/react-kapsule
[npm-downloads-url]: https://www.npmtrends.com/react-kapsule

---
_Source: https://npm.io/package/react-kapsule · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._