Rebuild Hooks in the Nexca

RMAG news

Nexca is admin panel that we build recently and this article I gonna explain each hook to understand them better for find the latest update you check them here .

useFetch

The useFetch hook is used to fetch data such as posts, services, or sections from a specified URL. This hook takes one parameter, which is the URL from which to fetch the data.

const data = useFetch(/api/posts/);

useGetSection

The useGetSection hook is used to fetch data from a specific section. This hook is particularly useful for the client section. It takes three parameters:

url: The URL from which to fetch the data, typically an API endpoint for posts.

lengthItem: The number of items you want to display in that section.

secid: The ID of the section you want to fetch data for.

You can also extract the loading state to display a skeleton while the posts are loading.

const { data, loading } = useGetSection(/api/posts/, 8, 2);

useGetLatestPosts

The useGetLatestPosts hook is used to fetch the latest posts on the site. This hook takes one parameter:

recentSize: The number of recent items you want to display.

It is good practice to set the number of items you want to see using useState.

const [recentSize] = useState(5);
const { posts } = useGetLatestPosts(recentSize);

useCheckLogin

The useCheckLogin hook is used exclusively for the admin to check if a user is logged in. It does not take any parameters and should only be called in the admin page or layout.

useSinglePost

The useSinglePost hook is used to fetch a single post based on an ID parameter. It finds the matching post and displays it to the user. This hook is only used on the /Posts/[id] page.

const post = useSinglePost();
// To read data from the post
<h1>{post.title}</h1>

useReadText

The useReadText hook is used to read a given text using the browser’s speech synthesis capability. It provides functionality to start and stop the reading process. This hook takes one parameter:

text: The text to be read aloud.

The hook maintains a state isSpeaking to indicate whether the text is currently being read. It returns three values:

isSpeaking: A boolean indicating if the text is being read.

handleReadText: A function to start reading the text.

handleStopReading: A function to stop reading the text.

import { useReadText } from ./useReadText;

const ExampleComponent = () => {
const { isSpeaking, handleReadText, handleStopReading } = useReadText(Hello, this is a sample text.);

return (
<div>
<button onClick={handleReadText} disabled={isSpeaking}>Read Text</button>
<button onClick={handleStopReading} disabled={!isSpeaking}>Stop Reading</button>
</div>
);
};

Live Demo

Username: admin
Password: a123b456@@

Please follow and like us:
Pin Share