Skip to content
Permalink

Comparing changes

Choose two branches to see what’s changed or to start a new pull request. If you need to, you can also or learn more about diff comparisons.

Open a pull request

Create a new pull request by comparing changes across two branches. If you need to, you can also . Learn more about diff comparisons here.
base repository: alexnault/react-headings
Failed to load repositories. Confirm that selected base ref is valid, then try again.
Loading
base: v3.0.12
Choose a base ref
...
head repository: alexnault/react-headings
Failed to load repositories. Confirm that selected head ref is valid, then try again.
Loading
compare: master
Choose a head ref
Loading
3 changes: 3 additions & 0 deletions .eslintignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
node_modules
dist
coverage
5 changes: 2 additions & 3 deletions .eslintrc
Original file line number Diff line number Diff line change
@@ -4,10 +4,9 @@
"extends": [
"plugin:@typescript-eslint/eslint-recommended",
"plugin:@typescript-eslint/recommended",
"react-app",
"prettier"
],
"env": {
"es6": true,
},
"es6": true
}
}
15 changes: 9 additions & 6 deletions .github/workflows/ci-and-publish.yml
Original file line number Diff line number Diff line change
@@ -12,25 +12,28 @@ jobs:
runs-on: ubuntu-latest
strategy:
matrix:
node-version: [10.x, 12.x, 14.x]
node-version: [12.x, 14.x, 16.x, 18.x]
steps:
- uses: actions/checkout@v2
- uses: actions/checkout@v3
- name: Use Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v1
uses: actions/setup-node@v2
with:
node-version: ${{ matrix.node-version }}
cache: npm
- run: npm ci
- run: npm run lint
- run: npm test

publish-npm:
needs: test
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- uses: actions/setup-node@v1
- uses: actions/checkout@v3
- uses: actions/setup-node@v2
with:
node-version: 14
node-version: 18
registry-url: https://registry.npmjs.org/
cache: npm
- run: npm ci
- run: npm run build
- run: npx semantic-release
20 changes: 14 additions & 6 deletions .github/workflows/ci.yml
Original file line number Diff line number Diff line change
@@ -1,6 +1,3 @@
# This workflow will do a clean install of node dependencies, build the source code and run tests across different versions of node
# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions

name: ci

on:
@@ -12,13 +9,24 @@ jobs:
runs-on: ubuntu-latest
strategy:
matrix:
node-version: [10.x, 12.x, 14.x]
node-version: [12.x, 14.x, 16.x, 18.x]
steps:
- uses: actions/checkout@v2
- uses: actions/checkout@v3
- name: Use Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v1
uses: actions/setup-node@v2
with:
node-version: ${{ matrix.node-version }}
cache: npm
- run: npm ci
- run: npm run lint
- run: npm test
- run: npm run build
- name: Upload coverage to Codecov
uses: codecov/codecov-action@v2
size:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- uses: andresz1/size-limit-action@v1
with:
github_token: ${{ secrets.GITHUB_TOKEN }}
24 changes: 12 additions & 12 deletions .github/workflows/codeql-analysis.yml
Original file line number Diff line number Diff line change
@@ -2,12 +2,12 @@ name: "CodeQL"

on:
push:
branches: [ master, next ]
branches: [master, next]
pull_request:
# The branches below must be a subset of the branches above
branches: [ master ]
branches: [master]
schedule:
- cron: '32 10 * * 3'
- cron: "32 10 * * 3"

jobs:
analyze:
@@ -21,16 +21,16 @@ jobs:
strategy:
fail-fast: false
matrix:
language: [ 'javascript' ]
language: ["javascript"]

steps:
- name: Checkout repository
uses: actions/checkout@v2
- name: Checkout repository
uses: actions/checkout@v3

- name: Initialize CodeQL
uses: github/codeql-action/init@v1
with:
languages: ${{ matrix.language }}
- name: Initialize CodeQL
uses: github/codeql-action/init@v1
with:
languages: ${{ matrix.language }}

- name: Perform CodeQL Analysis
uses: github/codeql-action/analyze@v1
- name: Perform CodeQL Analysis
uses: github/codeql-action/analyze@v1
4 changes: 4 additions & 0 deletions .prettierignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
node_modules
dist
coverage
README.md
13 changes: 13 additions & 0 deletions .size-limit.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
[
{
"name": "JS Minified",
"path": "dist/*.js",
"gzip": false,
"limit": "1608B"
},
{
"name": "JS Compressed",
"path": "dist/*.js",
"limit": "750B"
}
]
File renamed without changes.
4 changes: 0 additions & 4 deletions .vscode/settings.json

This file was deleted.

124 changes: 83 additions & 41 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,21 @@
![React Headings Logo](https://github.com/alexnault/react-headings/raw/master/assets/react-headings.png)

# React Headings ![checks](https://img.shields.io/github/workflow/status/alexnault/react-headings/ci-and-publish?style=flat-square) ![npm](https://img.shields.io/npm/v/react-headings?style=flat-square) ![size](https://img.shields.io/bundlephobia/minzip/react-headings?style=flat-square)
# React Headings

<p>
<a aria-label="Build check" href="https://github.com/alexnault/react-headings/actions">
<img alt="" src="https://img.shields.io/github/actions/workflow/status/alexnault/react-headings/ci-and-publish.yml?branch=master&style=for-the-badge">
</a>
<a aria-label="NPM version" href="https://www.npmjs.com/package/react-headings">
<img alt="" src="https://img.shields.io/npm/v/react-headings?style=for-the-badge">
</a>
<a aria-label="Size" href="https://bundlephobia.com/package/react-headings">
<img alt="" src="https://img.shields.io/bundlephobia/minzip/react-headings?style=for-the-badge">
</a>
<a aria-label="Monthly downloads" href="https://www.npmjs.com/package/react-headings">
<img alt="" src="https://img.shields.io/npm/dm/react-headings?style=for-the-badge">
</a>
</p>

> Never worry about using the wrong heading level (`h1`, `h2`, etc.) in complex React apps!
@@ -29,21 +44,19 @@ 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

```bash
npm install react-headings
# or
yarn add react-headings
```

## Examples
@@ -53,73 +66,102 @@ 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>
);
}

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 +176,6 @@ function MyHeading(props) {
}
```

Leveraging `Component` and `level` from the context should make implementing other librairies pretty straightforward.

## API

### `<H>` component
@@ -187,7 +227,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>
);
}

6 changes: 6 additions & 0 deletions codecov.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
coverage:
status:
project:
default:
target: 100%
threshold: 0%
14 changes: 0 additions & 14 deletions jest.config.js

This file was deleted.

Loading