react-kapsule
TypeScript icon, indicating that this package has built-in type declarations

2.4.0 • Public • Published

react-kapsule

NPM package Build Size NPM Downloads

A React wrapper for kapsule-style web components.

Quick start

import fromKapsule from 'react-kapsule';

or using a script tag

<script src="//unpkg.com/react-kapsule"></script>

Usage example

Given a kapsule component:

const myKapsule = Kapsule({ 
  props: {
    prop1: {},
    prop2: {}
  },
  ...
});

Render it in React:

const MyKapsuleComponent = fromKapsule(myKapsule);

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

API reference

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. Can be conveniently defined using the Kapsule framework.

  • options

An object with configuration options that can be used to define the React component. For example:

{
  wrapperElementType: 'span'
}
Option Type Default Description
wrapperElementType string or React component 'div' The type of DOM element used by the underlying React createElement to mount the component. Can be either a tag name string (such as 'div' or 'span') or a React component type (a class or a function).
nodeMapper function node => node A mapping function that allows to convert the DOM node into an object understood by the kapsule component.
methodNames array of strings [] The list of kapsule component methods 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(...).
initPropNames array of strings [] The list of props that are intended to be passed as configuration options 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.

Package Sidebar

Install

npm i react-kapsule

Weekly Downloads

26,697

Version

2.4.0

License

MIT

Unpacked Size

49.6 kB

Total Files

8

Last publish

Collaborators

  • vasturiano