Rebuild Hooks in the Nexca

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:

1. url: The URL from which to fetch the data, typically an API endpoint for posts.
2. lengthItem: The number of items you want to display in that section.
3. 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:

1. isSpeaking: A boolean indicating if the text is being read.
2. handleReadText: A function to start reading the text.
3. 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@@