@visual-analytics-components/react

Visual Analytics Components for React

Usage no npm install needed!

<script type="module">
  import visualAnalyticsComponentsReact from 'https://cdn.skypack.dev/@visual-analytics-components/react';
</script>

README

@visual-analytics-components/react

Utilities for creating VAC components using React.

Getting Started

import {
    createComponent,
    ComponentProps,
} from '@visual-analytics-components/react'

/**
 * 1) Define a custom configuration for your component that consumers will utilize.
 */
import { ComponentConfiguration } from 'visual-analytics-components'

export interface Configuration extends ComponentConfiguration {
    message: string
}

/**
 * 2) Define a React component for your visualization.
 */
function MyVisualReactComponent({ manager, configuration }) {
    return <div>hello! {configuration.message}</div>
}

/**
 * 3) Define CSS styles based on a Thematic theme
 */
function getStyles(theme: Theme) {
    return `
    .item {
      font-size: 20px;
    }
  `
}

/**
 * 4) Use the wrapper function to wire your React component into the VAC system.
 */
export const MyComponent: React.FC<ComponentProps<
    Configuration
>> = createComponent<Configuration>(MyVisualReactComponent, getStyles)