{"_id":"@aniruddha1806/bubble-chart","_rev":"3-2ea46ed155e25779ade672767c2921f8","name":"@aniruddha1806/bubble-chart","dist-tags":{"latest":"1.0.2"},"versions":{"1.0.0":{"name":"@aniruddha1806/bubble-chart","version":"1.0.0","keywords":["react","chart","bubble","visualization","data","typescript","responsive"],"author":{"name":"Your Name"},"license":"MIT","_id":"@aniruddha1806/bubble-chart@1.0.0","maintainers":[{"name":"aniruddha1806","email":"aniruddha.kulkarni1806@gmail.com"}],"homepage":"https://github.com/yourusername/react-bubble-chart-ts#readme","bugs":{"url":"https://github.com/yourusername/react-bubble-chart-ts/issues"},"dist":{"shasum":"9a5c8f383f7373d64f5ef187ed70221e1f09922b","tarball":"https://registry.npmjs.org/@aniruddha1806/bubble-chart/-/bubble-chart-1.0.0.tgz","fileCount":11,"integrity":"sha512-qnMvBgV0vZsEF+u6Qx7qFkd92iojyRvKq6P5lGyAnkOtxoJ7GeZgVfy4m6c/pVd0OQ2XXQLrf8caztaduOzySg==","signatures":[{"sig":"MEUCIQCNCKIYaKwgXI2YWG/J5naiFMXibqD74AJL6jzNE41YEQIgWHOGoaCRb7Nl2/zKc6879yi++fH5RMGfrc4+jHv77VA=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":38107},"main":"dist/cjs/index.js","type":"module","types":"dist/index.d.ts","module":"dist/esm/index.js","scripts":{"lint":"eslint src/**/*.{ts,tsx}","build":"rollup -c","clean":"rimraf dist","prepublishOnly":"npm run clean && npm run build"},"_npmUser":{"name":"aniruddha1806","email":"aniruddha.kulkarni1806@gmail.com"},"repository":{"url":"git+https://github.com/yourusername/react-bubble-chart-ts.git","type":"git"},"_npmVersion":"10.9.1","description":"A customizable, responsive bubble chart component for React with TypeScript support","directories":{},"_nodeVersion":"20.14.0","_hasShrinkwrap":false,"devDependencies":{"tslib":"^2.4.0","eslint":"^8.19.0","rimraf":"^3.0.2","rollup":"^2.77.0","typescript":"^4.7.4","@types/react":"^18.0.15","@types/react-dom":"^18.0.6","rollup-plugin-dts":"^4.2.2","eslint-plugin-react":"^7.30.1","rollup-plugin-terser":"^7.0.2","@rollup/plugin-commonjs":"^22.0.0","@rollup/plugin-typescript":"^8.3.2","@typescript-eslint/parser":"^5.30.6","eslint-plugin-react-hooks":"^4.6.0","@rollup/plugin-node-resolve":"^13.3.0","@typescript-eslint/eslint-plugin":"^5.30.6","rollup-plugin-peer-deps-external":"^2.2.4"},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0"},"_npmOperationalInternal":{"tmp":"tmp/bubble-chart_1.0.0_1744195061871_0.17217654475323307","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@aniruddha1806/bubble-chart","version":"1.0.1","keywords":["react","chart","bubble","visualization","data","typescript","responsive"],"author":{"name":"Your Name"},"license":"MIT","_id":"@aniruddha1806/bubble-chart@1.0.1","maintainers":[{"name":"aniruddha1806","email":"aniruddha.kulkarni1806@gmail.com"}],"homepage":"https://github.com/yourusername/react-bubble-chart-ts#readme","bugs":{"url":"https://github.com/yourusername/react-bubble-chart-ts/issues"},"dist":{"shasum":"b71ba4af60334cd4650230e1f17cec592e1c1ef7","tarball":"https://registry.npmjs.org/@aniruddha1806/bubble-chart/-/bubble-chart-1.0.1.tgz","fileCount":11,"integrity":"sha512-pwS6F/NdGd1GynkN/zijYisE/RtQzhCXLm9IAzVNJqz0BM3788fgBE0mBxreIFnWHAOhfTHDYm0DcQrsRU6cYg==","signatures":[{"sig":"MEQCIEAJt+M2lkFWv9SnmpfUq9/h9KcCfuvDFArksAKE+FKhAiByST4QUWIzM9/BI1SE32EJUBnjfyoFDtgjrTUVq6V91w==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":39706},"main":"dist/cjs/index.js","type":"module","types":"dist/index.d.ts","module":"dist/esm/index.js","scripts":{"lint":"eslint src/**/*.{ts,tsx}","build":"rollup -c","clean":"rimraf dist","prepublishOnly":"npm run clean && npm run build"},"_npmUser":{"name":"aniruddha1806","email":"aniruddha.kulkarni1806@gmail.com"},"repository":{"url":"git+https://github.com/yourusername/react-bubble-chart-ts.git","type":"git"},"_npmVersion":"10.9.1","description":"A customizable, responsive bubble chart component for React with TypeScript support","directories":{},"_nodeVersion":"20.14.0","_hasShrinkwrap":false,"devDependencies":{"tslib":"^2.4.0","eslint":"^8.19.0","rimraf":"^3.0.2","rollup":"^2.77.0","typescript":"^4.7.4","@types/react":"^18.0.15","@types/react-dom":"^18.0.6","rollup-plugin-dts":"^4.2.2","eslint-plugin-react":"^7.30.1","rollup-plugin-terser":"^7.0.2","@rollup/plugin-commonjs":"^22.0.0","@rollup/plugin-typescript":"^8.3.2","@typescript-eslint/parser":"^5.30.6","eslint-plugin-react-hooks":"^4.6.0","@rollup/plugin-node-resolve":"^13.3.0","@typescript-eslint/eslint-plugin":"^5.30.6","rollup-plugin-peer-deps-external":"^2.2.4"},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0"},"_npmOperationalInternal":{"tmp":"tmp/bubble-chart_1.0.1_1744195637661_0.30042419618034133","host":"s3://npm-registry-packages-npm-production"}},"1.0.2":{"name":"@aniruddha1806/bubble-chart","version":"1.0.2","type":"module","description":"A customizable, responsive bubble chart component for React with TypeScript support","main":"dist/cjs/index.js","module":"dist/esm/index.js","types":"dist/index.d.ts","scripts":{"build":"rollup -c","lint":"eslint src/**/*.{ts,tsx}","clean":"rimraf dist","prepublishOnly":"npm run clean && npm run build"},"keywords":["react","chart","bubble","visualization","data","typescript","responsive"],"author":{"name":"Aniruddha Kulkarni"},"license":"MIT","peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0"},"devDependencies":{"@rollup/plugin-commonjs":"^22.0.0","@rollup/plugin-node-resolve":"^13.3.0","@rollup/plugin-typescript":"^8.3.2","@types/react":"^18.0.15","@types/react-dom":"^18.0.6","@typescript-eslint/eslint-plugin":"^5.30.6","@typescript-eslint/parser":"^5.30.6","eslint":"^8.19.0","eslint-plugin-react":"^7.30.1","eslint-plugin-react-hooks":"^4.6.0","rimraf":"^3.0.2","rollup":"^2.77.0","rollup-plugin-dts":"^4.2.2","rollup-plugin-peer-deps-external":"^2.2.4","rollup-plugin-terser":"^7.0.2","tslib":"^2.4.0","typescript":"^4.7.4"},"_id":"@aniruddha1806/bubble-chart@1.0.2","_nodeVersion":"20.14.0","_npmVersion":"10.9.1","dist":{"integrity":"sha512-8CZMQ3qT90TJqLBQdIUtPeF7OZbn7e8naBG/UaWGlalWdEW+iOSuGPcDNFKcwdGU3/3C7XopZ+mZhY6YXQ+jeg==","shasum":"e542ad6f4e565dffa71ad34a93af0d9be414e006","tarball":"https://registry.npmjs.org/@aniruddha1806/bubble-chart/-/bubble-chart-1.0.2.tgz","fileCount":12,"unpackedSize":51202,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIGeqLC8BAP2F2Bvba0DbM+6BT4I3XzvTiAzEAhjrrnvhAiEA+/3q35Unl/n1wBXAo+nfa8oc8rjrRKBy96OVULkoZgo="}]},"_npmUser":{"name":"aniruddha1806","email":"aniruddha.kulkarni1806@gmail.com"},"directories":{},"maintainers":[{"name":"aniruddha1806","email":"aniruddha.kulkarni1806@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/bubble-chart_1.0.2_1749146333296_0.16823424248016594"},"_hasShrinkwrap":false}},"time":{"created":"2025-04-09T10:37:41.782Z","modified":"2025-06-05T17:58:53.652Z","1.0.0":"2025-04-09T10:37:42.069Z","1.0.1":"2025-04-09T10:47:17.828Z","1.0.2":"2025-06-05T17:58:53.482Z"},"author":{"name":"Aniruddha Kulkarni"},"license":"MIT","keywords":["react","chart","bubble","visualization","data","typescript","responsive"],"description":"A customizable, responsive bubble chart component for React with TypeScript support","maintainers":[{"name":"aniruddha1806","email":"aniruddha.kulkarni1806@gmail.com"}],"readme":"# React Bubble Chart\r\n\r\nA powerful, customizable bubble chart component for React applications with TypeScript support. Perfect for visualizing three-dimensional data relationships with interactive features, smooth animations, and extensive customization options.\r\n\r\n## Installation\r\n\r\n```bash\r\nnpm install @aniruddha1806/bubble-chart\r\n```\r\n\r\n## Features\r\n\r\n- 🫧 Interactive bubble charts with three-dimensional data visualization\r\n- 🎭 Smooth entrance animations with scroll-triggered effects\r\n- 🖱️ Hover tooltips and click handlers\r\n- 📊 Customizable axes with configurable ticks and labels\r\n- 🎨 Extensive styling options (colors, sizing, formatting)\r\n- 📱 Responsive SVG-based rendering\r\n- 📏 Flexible bubble sizing (relative or absolute)\r\n- 🔄 Real-time data updates with smooth transitions\r\n- 📝 TypeScript support with full type definitions\r\n- ♿ Accessibility-friendly structure\r\n- 🪶 Zero dependencies for chart rendering\r\n\r\n## Quick Start\r\n\r\n### Basic Bubble Chart\r\n\r\n```jsx\r\nimport { BubbleChart } from '@aniruddha1806/bubble-chart';\r\n\r\nfunction App() {\r\n  const data = [\r\n    { x: 10, y: 20, size: 15, label: 'Product A', color: '#3b82f6' },\r\n    { x: 25, y: 35, size: 25, label: 'Product B', color: '#10b981' },\r\n    { x: 40, y: 15, size: 20, label: 'Product C', color: '#f59e0b' },\r\n    { x: 30, y: 45, size: 30, label: 'Product D', color: '#ef4444' },\r\n    { x: 50, y: 30, size: 18, label: 'Product E', color: '#8b5cf6' }\r\n  ];\r\n\r\n  return (\r\n    <BubbleChart\r\n      data={data}\r\n      width=\"100%\"\r\n      height={400}\r\n      xAxisLabel=\"Revenue (millions)\"\r\n      yAxisLabel=\"Growth Rate (%)\"\r\n      showTooltip={true}\r\n      animated={true}\r\n    />\r\n  );\r\n}\r\n```\r\n\r\n### Advanced Configuration\r\n\r\n```jsx\r\nimport { BubbleChart } from '@aniruddha1806/bubble-chart';\r\n\r\nfunction AdvancedExample() {\r\n  const data = [\r\n    // ... your data\r\n  ];\r\n\r\n  return (\r\n    <BubbleChart\r\n      data={data}\r\n      width={800}\r\n      height={500}\r\n      xAxisLabel=\"Market Share (%)\"\r\n      yAxisLabel=\"Customer Satisfaction\"\r\n      minRadius={8}\r\n      maxRadius={60}\r\n      xAxisTicks={8}\r\n      yAxisTicks={6}\r\n      bubbleSizeMultiplier={1.2}\r\n      animated={true}\r\n      animationDuration={1000}\r\n      formatValue={(value) => `$${value}M`}\r\n      onBubbleClick={(bubble) => console.log('Clicked:', bubble)}\r\n    />\r\n  );\r\n}\r\n```\r\n\r\n## Props\r\n\r\n### Core Props\r\n\r\n| Prop | Type | Default | Description |\r\n|------|------|---------|-------------|\r\n| `data` | `BubbleDataPoint[]` | `required` | Array of bubble data points |\r\n| `width` | `number \\| string` | `\"100%\"` | Chart width |\r\n| `height` | `number \\| string` | `400` | Chart height |\r\n\r\n### Styling Props\r\n\r\n| Prop | Type | Default | Description |\r\n|------|------|---------|-------------|\r\n| `colors` | `string[]` | `default palette` | Color palette for bubbles |\r\n| `backgroundColor` | `string` | `\"transparent\"` | Chart background color |\r\n| `className` | `string` | `\"\"` | CSS class for container |\r\n| `bubbleClassName` | `string` | `\"\"` | CSS class for bubbles |\r\n| `tooltipClassName` | `string` | `\"\"` | CSS class for tooltips |\r\n\r\n### Axis Props\r\n\r\n| Prop | Type | Default | Description |\r\n|------|------|---------|-------------|\r\n| `xAxisLabel` | `string` | `\"X-Axis\"` | X-axis label text |\r\n| `yAxisLabel` | `string` | `\"Y-Axis\"` | Y-axis label text |\r\n| `xAxisTicks` | `number` | `5` | Number of X-axis tick marks |\r\n| `yAxisTicks` | `number` | `5` | Number of Y-axis tick marks |\r\n\r\n### Bubble Sizing Props\r\n\r\n| Prop | Type | Default | Description |\r\n|------|------|---------|-------------|\r\n| `minRadius` | `number` | `10` | Minimum bubble radius |\r\n| `maxRadius` | `number` | `50` | Maximum bubble radius |\r\n| `bubbleSizeMultiplier` | `number` | `1` | Size scaling multiplier |\r\n| `absoluteBubbleSize` | `boolean` | `false` | Use absolute sizing instead of relative |\r\n\r\n### Formatting Props\r\n\r\n| Prop | Type | Default | Description |\r\n|------|------|---------|-------------|\r\n| `formatValue` | `(value: number) => string` | `toString` | General value formatter |\r\n| `formatXAxisValue` | `(value: number) => string` | `formatValue` | X-axis value formatter |\r\n| `formatYAxisValue` | `(value: number) => string` | `formatValue` | Y-axis value formatter |\r\n\r\n### Interaction Props\r\n\r\n| Prop | Type | Default | Description |\r\n|------|------|---------|-------------|\r\n| `showTooltip` | `boolean` | `true` | Show hover tooltips |\r\n| `onBubbleClick` | `(dataPoint: BubbleDataPoint) => void` | `undefined` | Bubble click handler |\r\n| `tooltipContent` | `(bubble: BubbleDataPoint) => React.ReactNode` | `undefined` | Custom tooltip content |\r\n\r\n### Animation Props\r\n\r\n| Prop | Type | Default | Description |\r\n|------|------|---------|-------------|\r\n| `animated` | `boolean` | `true` | Enable entrance animations |\r\n| `animationDuration` | `number` | `800` | Animation duration (ms) |\r\n\r\n### Data Types\r\n\r\n```typescript\r\ntype BubbleDataPoint = {\r\n  x: number;\r\n  y: number;\r\n  size: number;\r\n  label?: string;\r\n  color?: string;\r\n  [key: string]: any; // Additional custom properties\r\n};\r\n```\r\n\r\n## Examples\r\n\r\n### Sales Performance Dashboard\r\n\r\nVisualize sales data with revenue, growth, and market size:\r\n\r\n```jsx\r\nimport { BubbleChart } from '@aniruddha1806/bubble-chart';\r\n\r\nfunction SalesPerformance() {\r\n  const salesData = [\r\n    {\r\n      x: 45, // Revenue (millions)\r\n      y: 12, // Growth rate (%)\r\n      size: 25, // Market size\r\n      label: 'North America',\r\n      color: '#3b82f6',\r\n      region: 'NA',\r\n      customers: 1250\r\n    },\r\n    {\r\n      x: 32,\r\n      y: 18,\r\n      size: 20,\r\n      label: 'Europe',\r\n      color: '#10b981',\r\n      region: 'EU',\r\n      customers: 980\r\n    },\r\n    {\r\n      x: 28,\r\n      y: 25,\r\n      size: 30,\r\n      label: 'Asia Pacific',\r\n      color: '#f59e0b',\r\n      region: 'APAC',\r\n      customers: 1580\r\n    },\r\n    {\r\n      x: 15,\r\n      y: 35,\r\n      size: 15,\r\n      label: 'Latin America',\r\n      color: '#ef4444',\r\n      region: 'LATAM',\r\n      customers: 650\r\n    },\r\n    {\r\n      x: 8,\r\n      y: 42,\r\n      size: 12,\r\n      label: 'Middle East',\r\n      color: '#8b5cf6',\r\n      region: 'ME',\r\n      customers: 420\r\n    }\r\n  ];\r\n\r\n  const handleBubbleClick = (bubble) => {\r\n    alert(`Region: ${bubble.label}\\\\nRevenue: $${bubble.x}M\\\\nGrowth: ${bubble.y}%\\\\nCustomers: ${bubble.customers}`);\r\n  };\r\n\r\n  const customTooltip = (bubble) => (\r\n    <div>\r\n      <div style={{ fontWeight: 'bold', marginBottom: '4px' }}>{bubble.label}</div>\r\n      <div>Revenue: $${bubble.x}M</div>\r\n      <div>Growth: \\${bubble.y}%</div>\r\n      <div>Market Size: \\${bubble.size}</div>\r\n      <div>Customers: \\${bubble.customers?.toLocaleString()}</div>\r\n    </div>\r\n  );\r\n\r\n  return (\r\n    <div style={{ padding: '20px' }}>\r\n      <h2>Regional Sales Performance</h2>\r\n      <p>Revenue vs Growth Rate (Bubble size = Market opportunity)</p>\r\n      \r\n      <BubbleChart\r\n        data={salesData}\r\n        width=\"100%\"\r\n        height={500}\r\n        xAxisLabel=\"Revenue ($ millions)\"\r\n        yAxisLabel=\"Growth Rate (%)\"\r\n        minRadius={15}\r\n        maxRadius={45}\r\n        xAxisTicks={6}\r\n        yAxisTicks={8}\r\n        animated={true}\r\n        animationDuration={1200}\r\n        onBubbleClick={handleBubbleClick}\r\n        tooltipContent={customTooltip}\r\n        formatXAxisValue={(value) => `$${value}M`}\r\n        formatYAxisValue={(value) => `${value}%`}\r\n      />\r\n      \r\n      <div style={{ \r\n        marginTop: '20px',\r\n        display: 'grid',\r\n        gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))',\r\n        gap: '16px'\r\n      }}>\r\n        {salesData.map((region, index) => (\r\n          <div\r\n            key={index}\r\n            style={{\r\n              padding: '16px',\r\n              backgroundColor: 'white',\r\n              border: '1px solid #e2e8f0',\r\n              borderRadius: '8px',\r\n              textAlign: 'center'\r\n            }}\r\n          >\r\n            <div style={{ \r\n              width: '20px', \r\n              height: '20px', \r\n              backgroundColor: region.color,\r\n              borderRadius: '50%',\r\n              margin: '0 auto 8px'\r\n            }}></div>\r\n            <h4 style={{ margin: '0 0 4px 0' }}>{region.label}</h4>\r\n            <p style={{ margin: 0, fontSize: '14px', color: '#666' }}>\r\n              $${region.x}M revenue\r\n            </p>\r\n          </div>\r\n        ))}\r\n      </div>\r\n    </div>\r\n  );\r\n}\r\n```\r\n\r\n\r\n## TypeScript Usage\r\n\r\nThe component provides full TypeScript support:\r\n\r\n```typescript\r\nimport { BubbleChart, BubbleDataPoint, BubbleChartProps } from '@aniruddha1806/bubble-chart';\r\nimport { useState, useCallback } from 'react';\r\n\r\ninterface AnalyticsData extends BubbleDataPoint {\r\n  category: string;\r\n  revenue: number;\r\n  customers: number;\r\n}\r\n\r\ninterface ChartConfig {\r\n  title: string;\r\n  xLabel: string;\r\n  yLabel: string;\r\n  colors: string[];\r\n}\r\n\r\nconst AnalyticsDashboard: React.FC = () => {\r\n  const [analyticsData, setAnalyticsData] = useState<AnalyticsData[]>([\r\n    {\r\n      x: 45,\r\n      y: 12,\r\n      size: 25,\r\n      label: 'Product A',\r\n      color: '#3b82f6',\r\n      category: 'Electronics',\r\n      revenue: 2500000,\r\n      customers: 1250\r\n    },\r\n    {\r\n      x: 32,\r\n      y: 18,\r\n      size: 20,\r\n      label: 'Product B',\r\n      color: '#10b981',\r\n      category: 'Software',\r\n      revenue: 1800000,\r\n      customers: 980\r\n    }\r\n  ]);\r\n\r\n  const handleBubbleClick = useCallback((dataPoint: BubbleDataPoint): void => {\r\n    const analyticsPoint = dataPoint as AnalyticsData;\r\n    console.log('Analytics data:', analyticsPoint);\r\n    // Handle click logic\r\n  }, []);\r\n\r\n  const formatCurrency = useCallback((value: number): string => {\r\n    return new Intl.NumberFormat('en-US', {\r\n      style: 'currency',\r\n      currency: 'USD',\r\n      minimumFractionDigits: 0,\r\n      maximumFractionDigits: 0\r\n    }).format(value);\r\n  }, []);\r\n\r\n  const customTooltip = useCallback((bubble: BubbleDataPoint): React.ReactNode => {\r\n    const data = bubble as AnalyticsData;\r\n    return (\r\n      <div>\r\n        <div style={{ fontWeight: 'bold', marginBottom: '4px' }}>{data.label}</div>\r\n        <div>Category: {data.category}</div>\r\n        <div>Revenue: {formatCurrency(data.revenue)}</div>\r\n        <div>Customers: {data.customers.toLocaleString()}</div>\r\n        <div>Market Share: \\${data.x}%</div>\r\n        <div>Growth: \\${data.y}%</div>\r\n      </div>\r\n    );\r\n  }, [formatCurrency]);\r\n\r\n  const chartConfig: ChartConfig = {\r\n    title: 'Product Performance Analysis',\r\n    xLabel: 'Market Share (%)',\r\n    yLabel: 'Growth Rate (%)',\r\n    colors: ['#3b82f6', '#10b981', '#f59e0b', '#ef4444', '#8b5cf6']\r\n  };\r\n\r\n  const bubbleChartProps: BubbleChartProps = {\r\n    data: analyticsData,\r\n    width: '100%',\r\n    height: 500,\r\n    colors: chartConfig.colors,\r\n    xAxisLabel: chartConfig.xLabel,\r\n    yAxisLabel: chartConfig.yLabel,\r\n    minRadius: 15,\r\n    maxRadius: 45,\r\n    animated: true,\r\n    animationDuration: 1000,\r\n    onBubbleClick: handleBubbleClick,\r\n    tooltipContent: customTooltip,\r\n    formatXAxisValue: (value) => `\\${value}%`,\r\n    formatYAxisValue: (value) => `\\${value}%`\r\n  };\r\n\r\n  return (\r\n    <div>\r\n      <h2>{chartConfig.title}</h2>\r\n      <BubbleChart {...bubbleChartProps} />\r\n      \r\n      <div>\r\n        <h3>Summary Statistics:</h3>\r\n        <p>Total Products: {analyticsData.length}</p>\r\n        <p>Total Revenue: {formatCurrency(analyticsData.reduce((sum, item) => sum + item.revenue, 0))}</p>\r\n        <p>Total Customers: {analyticsData.reduce((sum, item) => sum + item.customers, 0).toLocaleString()}</p>\r\n      </div>\r\n    </div>\r\n  );\r\n};\r\n```\r\n\r\n","readmeFilename":"README.md"}