heading-order-checker v1.0.5

Heading Order Checker

An accessibility tool to detect incorrect heading structure in your React or Vue apps.
Ensures your headings follow a proper hierarchy (H1 → H2 → H3, etc.), improving SEO and accessibility.

🚀 Features

✅ Detect heading hierarchy issues (h1 to h6)
✅ Framework support: React & Vue 3
✅ Easy to integrate
✅ Custom callback support
✅ Zero dependencies (core)

📦 Installation

npm install heading-order-checker
# or
yarn add heading-order-checker

⚙️ Options

❗ Example Warning Message

🔨 Usage

React (with useHeadingOrder)

import { useHeadingOrder } from 'heading-order-checker/react';

export default function App() {
  useHeadingOrder();

  return (
    <div>
      <h1>Main Heading</h1>
      <h3>This will trigger a warning!</h3>
    </div>
  );
}

Optional: Custom callback

useHeadingOrder({
  callback: (message, context) => {
    console.log('Custom handler:', message, context);
  }
});

Vue 3

Use the useHeadingOrder composable to check heading levels in your Vue components.

<template>
  <h1>Main Heading</h1>
  <h4>This will trigger a warning!</h4>
</template>

<script setup>
import { useHeadingOrder } from 'heading-order-checker/vue';

useHeadingOrder();
</script>

Optional: Custom callback

<script setup>
import { useHeadingOrder } from 'heading-order-checker/vue';

useHeadingOrder({
  callback: (message, context) => {
    console.log('Custom handler:', message, context);
  }
});
</script>

Core Function (Vanilla JS)

If you want to run the checker manually in any environment:

import { checkHeadingOrder } from 'heading-order-checker/core';

checkHeadingOrder(); // logs warnings in the console

Optional: Custom callback

import { checkHeadingOrder } from 'heading-order-checker/core';

checkHeadingOrder({
  callback: (message, context) => {
    console.log('Custom handler:', message, context);
  }
});

📄 License

MIT ©Giulio Simone Floresta