react-headings 3.0.14 → 3.0.18

package/README.md

@@ -29,13 +29,13 @@ References:
 
 ## Highlights
 
-- Flexible
-- Focused on developer experience
-- Fully tested
-- Typed with TypeScript
-- Works with component libraries (Material UI, etc.)
+- Improves SEO and accessibility
 - Supports server-side rendering
 - Under 1 kB minified & gzipped
+- Typed with TypeScript
+- Fully tested
+- Works with any CSS solutions (Tailwind, CSS-in-JS, etc.)
+- Plays nicely with component libraries (Material UI, etc.)
 - Follows [semantic versioning](https://semver.org/)
 
 ## Installation
@@ -53,23 +53,38 @@ yarn add react-headings
 ```jsx
 import React from "react";
 import { H, Section } from "react-headings";
-import MyIcon from "./MyIcon";
 
-function ParentComponent() {
+function App() {
   return (
-    <Section
-      component={
-        <div>
-          <MyIcon />
-          <H>My hx</H>
-        </div>
-      }
-    >
+    <Section component={<H>My hx</H>}>
+      <div>...</div>
+      <div>...</div>
+      <div>...</div>
       <Section component={<H>My hx+1</H>}>
-        <p>...</p>
+        <div>...</div>
+        <div>...</div>
+        <div>...</div>
       </Section>
+    </Section>
+  );
+}
+```
+
+### Advanced structure
+
+Child components inherit the current level of their parent:
+
+```jsx
+import React from "react";
+import { H, Section } from "react-headings";
+
+function ParentComponent() {
+  return (
+    <Section component={<H>My hx</H>}>
       <Section component={<H>My hx+1</H>}>
-        <ChildComponent />
+        <Section component={<H>My hx+2</H>}>
+          <ChildComponent />
+        </Section>
       </Section>
     </Section>
   );
@@ -77,49 +92,63 @@ function ParentComponent() {
 
 function ChildComponent() {
   return (
-    <Section component={<H>My hx+2</H>}>
-      <p>...</p>
+    <Section component={<H>My hy</H>}>
+      {/* The following heading would be a <h5> in the current context */}
+      <Section component={<H>My hy+1</H>}>
+        <p>...</p>
+      </Section>
     </Section>
   );
 }
 ```
 
-### Custom component
-
-You can render custom headings anywhere by using either the `useLevel` hook or the `H` component.
+### Styling
 
-- With the `useLevel` hook:
+A heading can be styled like any ordinary `<hx>` element since it accepts all the same props:
 
 ```jsx
 import React from "react";
-import { useLevel } from "react-headings";
+import { H, Section } from "react-headings";
 
 function App() {
-  const { Component, level } = useLevel();
-
-  return <Component>This is a h{level}</Component>;
+  return (
+    <Section component={<H className="my-class">My hx</H>}>
+      ...
+    </Section>
+  );
 }
 ```
 
-- With the `H` component:
+### Custom heading
+
+A heading can be as complex as we want:
 
 ```jsx
 import React from "react";
-import { H } from "react-headings";
+import { H, Section } from "react-headings";
+import MyIcon from "./MyIcon";
 
 function App() {
   return (
-    <H
-      render={({ Component, level }) => (
-        <Component>This is a h{level}</Component>
-      )}
-    />
+    <Section
+      component={
+        <div className="my-div">
+          <MyIcon className="my-icon" />
+          <H className="my-heading">My hx</H>
+        </div>
+      }
+    >
+      <div>...</div>
+      <div>...</div>
+      <div>...</div>
+    </Section>
   );
 }
 ```
 
-### Using component librairies
+### Using component libraries
 
+Leveraging `Component` and `level` from the context allows the use of component libraries.
 Here's an example with [Material UI](https://material-ui.com/api/typography/):
 
 ```jsx
@@ -134,8 +163,6 @@ function MyHeading(props) {
 }
 ```
 
-Leveraging `Component` and `level` from the context should make implementing other librairies pretty straightforward.
-
 ## API
 
 ### `<H>` component
@@ -187,7 +214,9 @@ import { Section, H } from "react-headings";
 
 function Example1() {
   return (
-    <Section component={<H>This is my title</H>}>This is my content</Section>
+    <Section component={<H>This is my title</H>}>
+      This is my content
+    </Section>
   );
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-headings",
-  "version": "3.0.14",
+  "version": "3.0.18",
   "description": "HTML headings with auto-incrementing levels for WCAG compliance.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -22,6 +22,7 @@
   "homepage": "https://github.com/alexnault/react-headings#readme",
   "scripts": {
     "build": "rm -rf ./dist && tsc",
+    "lint": "eslint src/ --max-warnings=0",
     "test": "jest"
   },
   "files": [
@@ -40,7 +41,6 @@
     "conventional-changelog-conventionalcommits": "^4.6.1",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.3.0",
-    "eslint-config-react-app": "^6.0.0",
     "jest": "^27.2.4",
     "prettier": "^2.2.1",
     "react": "^17.0.2",