asggen-headtags
v1.0.3
Published
Change Head Tags in SSR
Downloads
82
Readme
asggen-headtags
asggen-headtags is a React component for managing dynamic <head> tags such as <title>, <meta>, and <keywords>. This package helps with setting meta tags for SEO and improving your React application's head management.
Installation
To install the package, run:
npm install asggen-headtagsUsage
import the Package:
import HeadTags from "asggen-headtags";Use HeadTags in Your Component
Example usage in a React component:
import React from "react";
import HeadTags from "asggen-headtags";
const Support = ({ context }) => {
const title = "Support - Tensorlab";
const description = "Get support for all AFront products and services.";
const keywords = "support, Afront, help";
HeadTags({ title, description, keywords, context });
return (
<>
<div>Support Page</div>
</>
);
};
export default Support;
Integrate with Your Application
Example setup for routing and rendering:
import React, { Suspense } from "react";
import { Route, Routes } from "react-router-dom";
import logo from "../../dev/logo512.png";
import routes from "../ARoutes/AFRoutes.js";
const LoadingFallback = () => (
<div className={appStyles.loadingContainer}>
<img src={logo} alt="Loading..." className={appStyles.loadingLogo} />
</div>
);
const ARoutes = ({ context }) => {
return (
<Suspense fallback={<LoadingFallback />}>
<Routes>
{routes.map(({ path, element: Element }, index) => (
<Route
key={index}
path={path}
element={<Element context={context} />}
/>
))}
</Routes>
</Suspense>
);
};
export default ARoutes;
Server-Side Rendering Example
Example for rendering your app server-side:
import React from "react";
import ReactDOMServer from "react-dom/server";
import { StaticRouter } from "react-router-dom/server";
import App from "./App";
const createReactApp = async (location, res) => {
const context = {};
let didError = false;
const stream = ReactDOMServer.renderToPipeableStream(
<StaticRouter location={location} context={context}>
<App context={context} />
</StaticRouter>
);
// Handle stream and response as needed
};License
MIT License
This `README.md` provides an overview of the package, installation instructions, usage examples, and an example for server-side rendering. Adjust the content based on your package's specific details and requirements.