React custom Hooks
Custom hooks
🧑💻
Links
-
PersonalWebsite My personal website
-
@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/hooksFeatures
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!