react-kapsule

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