Merge pull request #2 from alexnault/next

Author: alexnault

.github/workflows/ci.yml

@@ -5,7 +5,7 @@ name: CI
 
 on:
   pull_request:
-    branches: [master]
+    branches: [master, next]
 
 jobs:
   build-and-test:

.github/workflows/publish.yml

@@ -5,7 +5,7 @@ name: Test and publish package
 
 on:
   push:
-    branches: [master]
+    branches: [master, next]
 
 jobs:
   test:

.releaserc.json

@@ -1,4 +1,8 @@
 {
+  "branches": [
+    "master",
+    { "name": "next", "channel": "next", "prerelease": "next" }
+  ],
   "plugins": [
     [
       "@semantic-release/commit-analyzer",

README.md

@@ -1,56 +1,32 @@
-<img src="https://github.com/alexnault/react-headings/raw/master/assets/react-headings.png" width="100%" alt="React Headings" />
+![React Headings Logo](https://github.com/alexnault/react-headings/raw/master/assets/react-headings.png)
 
 # React Headings ![npm](https://img.shields.io/npm/v/react-headings?style=flat-square) ![size](https://img.shields.io/bundlephobia/minzip/react-headings?style=flat-square)
 
 > Never worry about using the wrong heading level (`h1`, `h2`, etc.) in complex React apps!
 
 React-headings maintains the current heading level and prevents skipping levels no matter your component structure, [as required by WCAG](https://www.w3.org/WAI/tutorials/page-structure/headings/).
 
-## Basic usage
+## Table of contents
 
-```jsx
-import React from "react";
-import { H, Level } from "react-headings";
+- [Demos](#demos)
+- [Highlights](#highlights)
+- [Installation](#installation)
+- [Examples](#examples)
 
-function ParentComponent() {
-  return (
-    <div>
-      <H>My heading (hx)</H>
-      <Level>
-        <H>My subheading (hx+1)</H>
-        <p>...</p>
-        <H>My subheading (hx+1)</H>
-        <Level>
-          <H>My subsubheading (hx+2)</H>
-          <p>...</p>
-          <ChildComponent />
-        </Level>
-      </Level>
-    </div>
-  );
-}
+## Demos
 
-function ChildComponent() {
-  return (
-    <div>
-      <H>My heading (hy)</H>
-      <Level>
-        <H>My subheading (hy+1)</H>
-        <p>...</p>
-      </Level>
-    </div>
-  )
-}
-```
+- [Minimal](https://codesandbox.io/s/react-headings-minimal-4temt?file=/src/Demo.js)
+- [Custom component](https://codesandbox.io/s/react-headings-custom-component-l4bjb?file=/src/Demo.js)
+- [Advanced structure](https://codesandbox.io/s/react-headings-advanced-structure-uxk4p?file=/src/Demo.js)
 
-## Features
+## Highlights
 
-- Flexible (no component lock-in)
+- Flexible
 - Focused on developer experience
+- Fully tested
 - Typed with TypeScript
 - Works with component libraries (Material UI, etc.)
-- Fully tested
-- Zero dependencies
+- Supports server-side rendering
 - Tiny (<1 kB minified + gzipped)
 - Follows [semantic versioning](https://semver.org/)
 
@@ -62,50 +38,94 @@ npm install react-headings
 yarn add react-headings
 ```
 
-## More examples
+## Examples
+
+### Basic usage
+
+```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>}>
+        <p>...</p>
+      </Section>
+      <Section component={<H>My hx+1</H>}>
+        <ChildComponent />
+      </Section>
+    </Section>
+  );
+}
+
+function ChildComponent() {
+  return (
+    <Section component={<H>My hx+2</H>}>
+      <p>...</p>
+    </Section>
+  );
+}
+```
 
 ### Custom component
 
-`H` exposes a `render` prop to render a custom component based on the current level.
-Note: `render` as precedence over `children`.
+You can render custom headings anywhere by using either the `useLevel` hook or the `H` component.
+
+- With the `useLevel` hook:
 
 ```jsx
 import React from "react";
-import { H, Level } from "react-headings";
-import { Typography } from "@material-ui/core";
+import { useLevel } from "react-headings";
 
-function MyComponent() {
+function App() {
+  const { Component, level } = useLevel();
+
+  return <Component>This is a h{level}</Component>;
+}
+```
+
+- With the `H` component:
+
+```jsx
+import React from "react";
+import { H } from "react-headings";
+
+function App() {
   return (
     <H
       render={({ Component, level }) => (
-        <Typography component={Component}>This is a h{level}</Typography>
+        <Component>This is a h{level}</Component>
       )}
     />
   );
 }
 ```
 
-### `useLevel` hook
+*Note: `render` as precedence over `children`.*
+
+### Using component librairies
+
+Here's an example with [Material UI](https://material-ui.com/api/typography/):
 
 ```jsx
 import React from "react";
 import { useLevel } from "react-headings";
+import { Typography } from "@material-ui/core";
 
-function MyComponent() {
-  const level = useLevel();
+function MyHeading(props) {
+  const { Component } = useLevel();
 
-  return <div>Current level is {level}</div>;
+  return <Typography component={Component} {...props} />;
 }
 ```
 
+Leveraging `Component` and `level` from the context should make implementing other librairies pretty straightforward.
+
 ## Changelog
 
 For a list of changes and releases, see the [changelog](https://github.com/alexnault/react-headings/releases).
 
 ## Contributing
 
-Found a bug, have a question or looking to improve react-headings? Open an [issue](https://github.com/alexnault/react-headings/issues/new) or a [PR](https://github.com/alexnault/react-headings/fork)!
-
-## License
-
-This project is under the [MIT license](/LICENSE).
+Found a bug, have a question or looking to improve react-headings? Open an [issue](https://github.com/alexnault/react-headings/issues/new), start a [discussion](https://github.com/alexnault/react-headings/discussions/new) or submit a [PR](https://github.com/alexnault/react-headings/fork)!

assets/react-headings.png

@@ -31,7 +31,6 @@
     "react": "^16.8.0 || ^17.0.0"
   },
   "devDependencies": {
-    "@semantic-release/commit-analyzer": "^8.0.1",
     "@testing-library/react": "^11.2.2",
     "@types/jest": "^26.0.19",
     "@types/react": "^17.0.0",