Zero-dependency magic heading levels for React and Vue.js
| uberschrift | |
| vueberschrift | |
| Issues | |
| CI status |
npm install uberschriftpage.tsx:
import { Hx, HxBoundary } from "uberschrift";
<Hx>Outside of the top level: this will be an h1</Hx>
<HxBoundary>
<Hx>Within the top level: this will be an h2</Hx>
<HxBoundary>
<Hx>Within the 2nd level: this will be an h3</Hx>
<HxBoundary>
<Hx>Within the 3rd level: this will be an h4</Hx>
</HxBoundary>
<Hx>Again within the 2nd level: this will be an h3</Hx>
</HxBoundary>
</HxBoundary>renders as:
<h1>Outside of the top level: this will be an h1</h1>
<h2>Within the top level: this will be an h2</h2>
<h3>Within the 2nd level: this will be an h3</h3>
<h4>Within the 3rd level: this will be an h4</h4>
<h3>Again within the 2nd level: this will be an h3</h3>npm install vueberschriftApp.vue:
<script setup lang="ts">
import { Hx, HxBoundary } from "vueberschrift";
</script>
<template>
<Hx>Outside of the top level: this will be an h1</Hx>
<HxBoundary>
<Hx>Within the top level: this will be an h2</Hx>
<HxBoundary>
<Hx>Within the 2nd level: this will be an h3</Hx>
</HxBoundary>
</HxBoundary>
</template>npm install
npx turbo dev
npx turbo test
npx turbo build