vasturiano / react-kapsule

React wrapper for kapsule-style web components

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.

react-kapsule's Issues

[Question] Listening to an event without consuming it

Is there a way we have a function onClick on a component, without actually overriding logic of the component?

Example : codesandbox. Here we add onClick, but that removes the zoom functionality of the chart

Building problem

Hello,
using Yarn workspaces, building my project where react-force-graph is a subproject dependency, I'm encountering a build error:
_

Creating an optimized production build...
Failed to compile.

/Users/aboschini/WebstormProjects/monorepo/node_modules/react-kapsule/dist/react-kapsule.module.js
Attempted import error: 'fromentries' does not contain a default export (imported as 'fromEntries').

_

Manually solved by fixing the import.
thanks

Incorrect use of hooks

Warning: An effect function must not return anything besides a function, which is used for clean-up. You returned: false

// @ts-ignore No typedefs yet
import SunburstChart from 'sunburst-chart';
// @ts-ignore No typedefs yet
import fromKapsule from 'react-kapsule';
const ReactSunburst = fromKapsule(SunburstChart)

Edge browser does not support fromEntries

Hi 👋, fromEntries is not supported in microsoft Edge browser (I don't know if that is something important 🤣, but I drop the issue here just in case).

react-kapsule/src/index.js

Line 35 in e780ad8

const configOptions = Object.fromEntries(

expect vue-kapsule

expect vue-kapsule

How to add custom behaviour on click event to sunburst component built with react-kapsule?

When sunburst component is used in react built with react-kapsule, how can I add custom behavior on click event of any slice of sunburst.

From suggestion here, I tried something like this:

  <ReactSunburst
    //...
    data={data}
    onClick={(node) => {
      myChart.focusOnNode(node);
      console.log("clicked");
    }}
  /> 

The problem I faced is that myChart is undefined inside the onClick handler of react component. So, this gives myChart is not defined error and the chart does not perform the default zooming behavior. If I omit the first line, "clicked" gets printed to the console.
Codesandbox link.