# @cdc/data-bite

> React component for displaying a single piece of data in a card module

Latest version **4.26.7** (published 2026-07-28) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install @cdc/data-bite
pnpm add @cdc/data-bite
yarn add @cdc/data-bite
bun add @cdc/data-bite
```

## Health

**Score 60/100 (C)** — status: active.

Positive: esm support; no vulnerabilities; recently updated; high maintenance score.

Warnings: low downloads; no types.

## Facts

| | |
|---|---|
| Version | 4.26.7 |
| Published | 2026-07-28 |
| First published | 2021-08-17 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 6 |
| Unpacked size | 1.4 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 55 |
| Author | cooms13 |
| Maintainers | cooms13, adoe, mpallansch |

## Links

- npm: https://www.npmjs.com/package/@cdc/data-bite
- Repository: https://github.com/CDCgov/cdc-open-viz
- Homepage: https://github.com/CDCgov/cdc-open-viz#readme
- Issues: https://github.com/CDCgov/cdc-open-viz/issues
- npm.io page: https://npm.io/package/@cdc/data-bite

## Dependencies (6)

- [lodash](https://npm.io/package/lodash.md) ^4.17.23
- [@cdc/core](https://npm.io/package/@cdc/core.md) ^4.26.7
- [chroma-js](https://npm.io/package/chroma-js.md) ^3.1.2
- [html-react-parser](https://npm.io/package/html-react-parser.md) ^5.2.3
- [resize-observer-polyfill](https://npm.io/package/resize-observer-polyfill.md) ^1.5.1
- [react-accessible-accordion](https://npm.io/package/react-accessible-accordion.md) ^5.0.1

## Recent versions

- 4.26.7 (latest) — 2026-07-28
- 4.26.6 — 2026-06-30
- 4.26.5 — 2026-06-04
- 4.26.4 — 2026-04-28
- 4.26.3 — 2026-04-06
- 4.26.2 — 2026-03-02
- 4.26.1 — 2026-01-28
- 4.25.11 — 2025-12-02
- 4.25.10 — 2025-10-28
- 4.25.8 — 2025-08-27
- 4.25.7 — 2025-07-29
- 4.25.6-1 — 2025-07-09
- 4.25.6 — 2025-07-01
- 4.25.5-1 — 2025-06-05
- 4.25.3 — 2025-03-25
- … 34 more at https://npm.io/package/@cdc/data-bite/versions

## README

# @cdc/data-bite

[![npm](https://img.shields.io/npm/v/@cdc/data-bite)](https://www.npmjs.com/package/@cdc/data-bite)

`<CdcDataBite />` is a React component for displaying a single highlighted value in a card-style layout.

## Installation

```bash
npm install @cdc/data-bite
```

## Quick Start

Use the package by passing a `config` object directly:

<!-- README_EXAMPLE_CONFIG_START -->
```jsx
import CdcDataBite from '@cdc/data-bite'

const config = {
  type: 'data-bite',
  version: '4.26.4',
  title: 'Data / Fact',
  biteBody: 'Highlight a statistic, data point, or key fact.',
  data: [{ Value: 1234 }],
  dataColumn: 'Value',
  dataFunction: 'Pass Through'
}

function App() {
  return (
    <div className='App'>
      <CdcDataBite config={config} />
    </div>
  )
}

export default App
```
<!-- README_EXAMPLE_CONFIG_END -->

You can also load configuration from a URL with `<CdcDataBite configUrl='/path/to/config.json' />`.

## Configuration

The primary reference for authoring configs is [CONFIG.md](./CONFIG.md).

If you are reading this in a context where relative Markdown links do not open correctly, use the [GitHub copy of the data bite config reference](https://github.com/CDCgov/cdc-open-viz/blob/main/packages/data-bite/CONFIG.md).

## Properties

| Property | Type | Description |
| --- | --- | --- |
| `config` | `object` | Configuration object for the data bite. This is the primary integration path for React consumers. |
| `configUrl` | `string` | Optional URL to a JSON config file. Use this when you want the component to fetch its config at runtime. |

---
_Source: https://npm.io/package/@cdc/data-bite · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._