# @squiz/xaccel-dynamic-heading

> This package provides a component capable of rendering text as any heading level (h1 through h6) or as a span element, depending on the provided props. It's designed for dynamic text content where the semantic importance might vary based on context.

Latest version **1.15.1-beta.0** (published 2024-05-10) · ISC license · 0 weekly downloads

## Install

```sh
npm install @squiz/xaccel-dynamic-heading
pnpm add @squiz/xaccel-dynamic-heading
yarn add @squiz/xaccel-dynamic-heading
bun add @squiz/xaccel-dynamic-heading
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.15.1-beta.0 |
| Published | 2024-05-10 |
| First published | 2023-08-03 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 19.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | ata-squiz, squiz-ksilalahi, squiz-lstephan, squiz-ncallahan, squiz-dschoen, azakens, kczepolkowska, azenderowska.squiz, pantyporowicz-squiz, hnarayanasamy, lunowak-squiz, mnowakowski1, jpolgar-squiz, aqureshi-sqz, tsmyth, hsingh_007, djarrott.squiz.net, sautade, avanschoor-squiz, thomasgrob, rainger_squiz, rszarafinski, tadams_squiz, pcoshansquiz, carlfoster, gtran, ewyatt, bmatters, wjarosz, jmatthew_squiz, bxwu, cupreti, mdobie, cdloh, lwright-sq, squiz-npm-publish, abarnes_squiz, gsherwood, pnolland, chadszinow-squiz, deborahsherwood, griseborough, akarelia, kfalloon, jsisk, mfox_squiz, cgoodbrand, sdanis, aadamsquiz, oliverneal, lnowak, squizwfagerstrom |

## Links

- npm: https://www.npmjs.com/package/@squiz/xaccel-dynamic-heading
- npm.io page: https://npm.io/package/@squiz/xaccel-dynamic-heading

## Dependencies (2)

- [react](https://npm.io/package/react.md) ^17.0.2
- [@squiz/xaccel-prop-types](https://npm.io/package/@squiz/xaccel-prop-types.md) ^1.2.0

## Recent versions

- 1.15.1-beta.0 (latest) — 2024-05-10
- 1.15.0 — 2024-05-10
- 1.15.0-beta.1 — 2024-04-18
- 1.14.0-alpha.1 — 2024-04-18
- 1.13.1 — 2024-01-30
- 1.13.0-beta.1 — 2024-01-23
- 1.12.1 — 2024-01-23
- 1.12.1-alpha.0 — 2024-01-19
- 1.9.1-alpha.0 — 2024-01-19
- 1.9.1-beta.0 — 2024-01-19
- 1.9.0 — 2024-01-19
- 1.9.0-beta.36 — 2024-01-18
- 1.10.0-alpha.5 — 2023-10-26
- 1.2.0 — 2023-08-04
- 1.1.0 — 2023-08-03

## README

# Dynamic Heading

This package provides a component capable of rendering text as any heading level (h1 through h6) or as a span element, depending on the provided props.
It's designed for dynamic text content where the semantic importance might vary based on context.

## Component Properties

| Property Name | Property description                                                               | Property Type     | IsRequired |
| ------------- | ---------------------------------------------------------------------------------- | ----------------- | ---------- |
| `type`        | Specifies the heading level (`h1`-`h6`) or `none` for a `span`. Default is `none`. | `string`          |            |
| `children`    | The text content or other React nodes to be rendered inside the heading or `span`. | `React.ReactNode` |            |

## Props Example:

```JSX
<DynamicHeading
  type="h2"
  className="customClass"
>
    Heading of h2 level
</DynamicHeading>
```

## Usage:

Install the package by running: `npm i @squiz/xaccel-dynamic-heading`

```JSX
import { DynamicHeading } from '@squiz/xaccel-dynamic-heading';

function SomeReactComponent({ content }) {
    return <DynamicHeading type="h3">{content}</DynamicHeading>;
}
```

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