Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/sohanemon/genius-car-client
readme: axios, react-hook-form, promise handling
https://github.com/sohanemon/genius-car-client
axios promise react react-hook-form react-hooks swiper
Last synced: about 14 hours ago
JSON representation
readme: axios, react-hook-form, promise handling
- Host: GitHub
- URL: https://github.com/sohanemon/genius-car-client
- Owner: sohanemon
- Created: 2022-11-05T06:54:05.000Z (about 2 years ago)
- Default Branch: master
- Last Pushed: 2022-11-25T03:21:36.000Z (almost 2 years ago)
- Last Synced: 2023-04-05T06:28:06.197Z (over 1 year ago)
- Topics: axios, promise, react, react-hook-form, react-hooks, swiper
- Language: JavaScript
- Homepage: https://ultra-genius-car.netlify.app
- Size: 29.7 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## Initial setup
```sh
cd src
rm App.css
mkdir components contexts hooks pages layouts routes
touch layouts/main.jsx
touch routes/router.jsx
```
## Awesome navItems mapping
```js
const navItems = [
Home,
About,
services,
Orders,
];
```
## Disable next button on swiper
- to re-render create a state
```js
const [index, setIndex] = useState(0);
const swipe = useSwiper();
swipe.on("slideChange", () => {
setIndex(swipe.realIndex);
});
```
- now apply as follow
```js
```
## import image with require
- use default parameter
```js
const image = require("../assets/images/location/Group 32.svg").default;
```
> as being a part of es6 `require()` returns a module. As it is not a normal javascript but bundled by webpack, we will found our output at a folder like `/static/*/*.*`. Which is actually at `require().default`
> remember sometimes `.default` is not required. `require()` itself returns a static location
## using react-hook-form
- prebuilt component
```js
function InputField({ register, title }) {
return (
{title}
);
}
```
- and pass as follow
```js
```
### to use default values
- create a default value
```js
let defaultValues = {};
defaultValues.firstName = "Sohan";
defaultValues.lastName = "Emon";
reset({ ...defaultValues });
```
- or start as following
```js
const { reset, register } = useForm();
useEffect(() => {
reset({ firstName: "sohan", lastName: "emon" });
}, []);
return (
);
```
## Axios
> JSON.stringify is not required with axios
- passing to body `axios.post(uri,data)`
```js
axios.post(`${process.env.REACT_APP_host}/orders`, { dev: "emon" });
```
- passing to header `axios.get(uri,config)`
```js
axios.get(`${process.env.REACT_APP_host}/orders`, {
headers: { name: "emon" },
});
```
- for passing both header and body `axios.post(uri, data, config)`
```js
axios.get(
`${process.env.REACT_APP_host}/orders/?email=${user?.email}`,
{ dev: "emon" },
{
headers: { name: "emon" },
}
);
```
### Axios instance 🚀🚀🚀
- create an instance
```js
export const client = axios.create({
baseURL: process.env.REACT_APP_server,
timeout: 5000,
headers: { authorization: "Bearer" },
});
```
- now use from any where
```js
client.get().then((res) => console.log(res));
```
or
```js
client.post("/service", data).then((res) => console.log(res));
```
### ImgBB with Axios
```js
axios
.post(
`https://api.imgbb.com/1/upload?expiration=600&key=${process.env.REACT_APP_imgbb_api}`,
formData
)
// where formData is formData.append("image", data.image[0]);
```
### reset/empty field on submit in rhf
```js
const onSubmit = (data, e) => {
e.target.reset();
};
```
## handling Promises
- `Promise` constructor receives a callback function and the callback function receives `res()` and `rej()`
```js
const prom = new Promise((resolve, reject) => {
const provider = new GoogleAuthProvider();
signInWithPopup(auth, provider)
.then((result) => {
resolve("logged");
})
.catch((error) => {
reject("out");
});
});
prom.then(() => {});
```
> this promise may be invoked automatically.
- we should use as follow
```js
const funPromise = () =>
new Promise((resolve, reject) => {
const provider = new GoogleAuthProvider();
signInWithPopup(auth, provider)
.then((result) => {
resolve("logged");
})
.catch((error) => {
reject("out");
});
});
funPromise.then(() => {});
```
> a better way to handle promise
## react-router loads a page from its middle of content
- use following hook
```js
const useScrollToTop = () => {
useEffect(() => {
window.scrollTo(0, 0);
return () => {};
}, []);
};
export default useScrollToTop;
```