Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/theritikchoure/headx
Headx - A document head manager for React. It helps you to create seo friendly react site
https://github.com/theritikchoure/headx
hacktoberfest hacktoberfest-accepted hacktoberfest2023 headx meta-tags node npm package react react-package
Last synced: 5 days ago
JSON representation
Headx - A document head manager for React. It helps you to create seo friendly react site
- Host: GitHub
- URL: https://github.com/theritikchoure/headx
- Owner: theritikchoure
- License: mit
- Created: 2022-07-01T06:29:39.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2023-10-11T12:45:45.000Z (about 1 year ago)
- Last Synced: 2024-11-02T07:34:08.976Z (12 days ago)
- Topics: hacktoberfest, hacktoberfest-accepted, hacktoberfest2023, headx, meta-tags, node, npm, package, react, react-package
- Language: JavaScript
- Homepage: https://theritikchoure.github.io/headx/docs/
- Size: 2.58 MB
- Stars: 6
- Watchers: 1
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# Headx
> It is a React Package to automatically modify the main html file (like index.html) to add the provided SEO meta tags and more. For example you can use it to add on the build time the following meta tags: title, description, open graph, twitter, icons and more.
[](https://www.npmjs.com/package/headx) [](https://standardjs.com) 
[](https://twitter.com/theritikchoure)
## Table of Contents
1. [Install](#install)
2. [Usage](#usage)
3. [Default SEO Configuration](#default-seo-configuration)
4. [Features](#features)
- [Supports](#supports)
- [No Duplicacy](#no-duplicacy)
- [Fast & Light](#fast--light)
5. [Additional Information](#additional-information)
6. [License](#license)
## Install
```bash
npm install --save headx
```
## Usage
Then you need to import `headx` as `Headx`. This will render out the tags in the `` for SEO. At a bare minimum, you should add a title and description.
**Example with just title and description:**
```jsx
import Headx from 'headx'
const Page = () => (
<>
Simple Usage
>
)
export default Page
```
But `Headx` gives you many more options that you can add inside the head tag. See below for a more detail example of a page.
**Typical page example:**
```jsx
import React from 'react'
import Headx from 'headx'
const App = () => {
return (
)
}
export default App
```
### Default SEO Configuration
`Headx` enables you to set some default SEO properties that will appear on all pages without needing to include anything on them. You can also override these on a page by page basis if needed.
To achieve this, Within your `Layout` or `Header` file you will need to import `headx` and pass it props.
Here is a typical example:
```jsx
import React from 'react'
import Headx from 'headx'
const App = () => {
return (
)
}
export default App
```
**Note:** To work properly default seo configuration, `Headx` should be placed in `Layout` or `Navbar` file.
From now on all of your pages will have the defaults above applied.
## Features
### Supports
Supports all valid head tags: title, base, meta, link, script, noscript, and style tags
### No Duplicacy
Duplicate head changes are preserved when specified in the same component
### Fast & Light
It is a simple, fast and lightweight package for react
## Additional information
This package creates the tags in the html file before the closing head tag.
## License
This package is licensed under the MIT license © [theritikchoure](https://github.com/theritikchoure)