react-venn

An interactive, beautiful React Venn diagram component supporting 2-set, 3-set, and 4-set diagrams.

Demo

• Live Demo: https://tonytomk.github.io/react-venn-example/
• Example App Source: https://github.com/tonytomk/react-venn-example

Features

• 2-Set, 3-Set & 4-Set Support: Seamlessly render Venn diagrams for up to four sets.
• Interactive: Hover and click interactions out of the box with built-in tooltips.
• Customizable: Beautiful built-in themes, per-region color overrides, spacing, and styling options.
• Animated: Smooth animations when data or layout changes.
• TypeScript: Written in TypeScript with full type definitions.

Installation

npm install react-venn
# or
yarn add react-venn
# or
pnpm add react-venn

Usage

You must import the CSS file for the component to style correctly.

import { useState } from 'react';
import { VennDiagram } from 'react-venn';
import 'react-venn/style.css';

export default function App() {
  const data = [
    { name: 'React', sets: ['A'], value: 12 },
    { name: 'TypeScript', sets: ['B'], value: 15 },
    { name: 'React & TypeScript', sets: ['A', 'B'], value: 4 },
  ];

  return (
    <VennDiagram
      setsCount={2}
      data={data}
      theme="classic"
      width={400}
      height={400}
      showLabels={true}
      showValues={true}
      showTooltip={true}
    />
  );
}

Props

| Prop | Type | Default | Description | |---|---|---|---| | setsCount | 2 \| 3 \| 4 | 2 | Number of sets in the diagram. | | data | VennDataItem[] | [] | Array of data items. A VennDataItem expects name, sets (array of strings like ['A'] or ['A', 'B']), and value. | | theme | ThemePresetName | 'classic' | The color theme (classic, pastel, dark, sunset, emerald). | | colors | VennColors | undefined | Optional per-region color overrides. | | width | number \| string | 400 | Width of the SVG canvas. | | height | number \| string | 400 | Height of the SVG canvas. | | spacing | number | 0.5 | The overlap spacing. | | fillOpacity | number | 0.65 | Opacity of the fill colors. | | strokeWidth | number | 2 | Width of the region borders. | | animated | boolean | true | Enables smooth transitions. | | onRegionClick | (region: VennRegionInfo) => void | undefined | Callback when a region is clicked. | | onRegionHover | (region: VennRegionInfo \| null) => void | undefined | Callback when a region is hovered. |

License

MIT © Tony Tom K