React custom Hooks

Custom hooks 🧑‍💻

Links

• PersonalWebsite My personal website

• GithubRepo

• @bahachammakhi/hooks NPM package for this library

Technologies

• Typescript TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. 💻
• React A JavaScript library for building user interfaces. 💻

Setup

$ npm install @bahachammakhi/hooks
#
$ yarn add @bahachammakhi/hooks

Features

List of features ready and TODOs for future development

• useApi hook

To-do list:

• useForm hook (documentation /exemple)
• useCurrentWidth (documentation / exemple)
• useLifeCycle (documentation / exemple)

Status

Project is: in progress

Documentation

useApi

import React, { useState, useEffect } from "react";
import { useApi } from "@bahachammakhi/hooks";
import axios from "axios";
const getPeople = () => axios.get("https://swapi.dev/api/people/");
const App = () => {
  const { ...calls } = useApi({ getPeople });
  const [people, setPeople] = useState < any > [];

  useEffect(() => {
    calls.getPeople.call();
  }, []);
  useEffect(() => {
    setPeople(calls.getPeople.data);
  }, [calls.getPeople.success]);

  return (
    <div>
      {people.results.map((element: any) => {
        return <>{element.name}</>;
      })}
    </div>
  );
};

useCurrentWidth

import React from "react";
import { useCurrentWidth } from "@bahachammakhi/hooks";

const App = () => {
  const width = useCurrentWidth();

  return (
    <div>
      <div style={{ width: width, backgroundColor: "black" }}>Name</div>
    </div>
  );
};

Contact

Created by @bahachammakhi - feel free to contact me!