Get unlimited public & private packages + package-based permissions with npm Pro.Get started »

react-kapsule

2.1.4 • Public • Published

react-kapsule

NPM package Build Size Dependencies

A React HOC wrapper for kapsule-style web components.

Quick start

import fromKapsule from 'react-kapsule';

or

const fromKapsule = require('react-kapsule');

or even

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

Install

npm i react-kapsule

DownloadsWeekly Downloads

1,763

Version

2.1.4

License

MIT

Unpacked Size

40 kB

Total Files

8

Last publish

Collaborators

  • avatar