#react #frontend #reactquery #javascript
How to generalize React-Query for centralized API requests instead of using it all over your react components. This is for customization and same-behavior purposes.
I created a custom hook called useReactQuery which takes 3 arguments and return the result of the useQuery hook. I have only used it once here so that I can pass all the custom stuff I want to work with inside my custom hook which useQuery doesn't provide like navigating according to API results, calling custom functions, or passing fully customizable Axios configs, etc.
#frontenddeveloper #frontendengineer #reactjs #reactjsdeveloper #reactjsdevelopment #reacthooks #typescript #ts #js #es6 #api #requests #http #nextjs #developer #webdeveloper
How to generalize React-Query for centralized API requests instead of using it all over your react components. This is for customization and same-behavior purposes.
I created a custom hook called useReactQuery which takes 3 arguments and return the result of the useQuery hook. I have only used it once here so that I can pass all the custom stuff I want to work with inside my custom hook which useQuery doesn't provide like navigating according to API results, calling custom functions, or passing fully customizable Axios configs, etc.
#frontenddeveloper #frontendengineer #reactjs #reactjsdeveloper #reactjsdevelopment #reacthooks #typescript #ts #js #es6 #api #requests #http #nextjs #developer #webdeveloper
Dev communicates
#react #frontend #reactquery #javascript How to generalize React-Query for centralized API requests instead of using it all over your react components. This is for customization and same-behavior purposes. I created a custom hook called useReactQuery which…
What if we need the same API data at two different places in application ? Do we need to create another hook that returns useReactQuery ?
If it is within the same page/container, you can share it once it is fetched in the parent component.
If it is not within the same page/container then you can reuse the hook like what you do using useQuery or any other reusable hooks.
If it is within the same page/container, you can share it once it is fetched in the parent component.
If it is not within the same page/container then you can reuse the hook like what you do using useQuery or any other reusable hooks.
'DarkMode' is pretty common nowadays but can we get current system theme?
By using the amazing javascript 'matchMedia' api we can do this. The matchMedia api access the css media queries and using css media query of 'prefers-color-scheme: dark' we can get the current system theme.
We can create a custom Hook for 'DarkMode' that also supports the dynamic theme changing like auto mode, this hook will give the boolean value about our current theme is dark or not for example,
If the user change the theme we can still get the current theme and If the user sets 'auto mode' we can get the theme dynamically.
By using the amazing javascript 'matchMedia' api we can do this. The matchMedia api access the css media queries and using css media query of 'prefers-color-scheme: dark' we can get the current system theme.
We can create a custom Hook for 'DarkMode' that also supports the dynamic theme changing like auto mode, this hook will give the boolean value about our current theme is dark or not for example,
If the user change the theme we can still get the current theme and If the user sets 'auto mode' we can get the theme dynamically.
Forwarded from Inspired Tech
Flexbox_or_Grid_Which_One_To_Choose_�_1683550820.pdf
419.9 KB
CSS Flexbox or CSS Grid? Which One To Choose? 🔥
#mui #style
import { FormControl, Select, MenuItem, makeStyles } from "@material-ui/core";
import { useState } from "react";
const dropdownStyles = makeStyles({
underline: {
borderBottom: "0px solid red !important",
"&:hover": {
borderBottom: "0px solid rgba(0,0,0,0)"
}
}
});
const Dropdown = () => {
const ddnSt = dropdownStyles();
const [item, setItem] = useState(1);
const selectStyle = {
control: (base) => ({
...base,
boxShadow: "none"
})
};
const handleChange = (event) => {
setItem(event.target.value);
};
return (
<FormControl
style={{
width: "140px",
boxShadow: "none"
}}
>
<Select
id="locationSelect"
className={ddnSt.underline}
value={item}
onChange={handleChange}
disableUnderline
>
<MenuItem value={1}>Item 1</MenuItem>
<MenuItem value={2}>Item 2</MenuItem>
<MenuItem value={3}>Item 3</MenuItem>
</Select>
</FormControl>
);
};
export default Dropdown;
$ yt-dlp -f "bestaudio/best[ext=m4a]" 4kmFt3apCRkuB13n4YjT0M2TJhXp
The entity #adapter in #Redux #Toolkit is a powerful API that simplifies the management of normalized state.
It provides a set of prebuilt reducers and selectors for performing CRUD (Create, Read, Update, Delete) operations on a normalized state structure containing instances of a particular type of data object.
It provides a set of prebuilt reducers and selectors for performing CRUD (Create, Read, Update, Delete) operations on a normalized state structure containing instances of a particular type of data object.
import { createEntityAdapter, createSlice } from '@reduxjs/toolkit';
// Define a "User" entity
type User = {
id: string;
name: string;
};
// Create an entity adapter for "User"
const usersAdapter = createEntityAdapter<User>();
// Create a slice that uses the entity adapter
const usersSlice = createSlice({
name: 'users',
initialState: usersAdapter.getInitialState(),
reducers: {
// Reducer logic using adapter methods
userAdded: usersAdapter.addOne,
userUpdated: usersAdapter.updateOne,
userRemoved: usersAdapter.removeOne,
},
});
// Export the generated actions and selectors
export const { userAdded, userUpdated, userRemoved } = usersSlice.actions;
export const {
selectById: selectUserById,
selectIds: selectUserIds,
selectEntities: selectUserEntities,
selectAll: selectAllUsers,
} = usersAdapter.getSelectors(state => state.users);
There are several ways to #format your code in #IntelliJ IDEA:
1. Reformatting a Selection (Shortcut: Ctrl+Alt+L (Windows/Linux), ⌘⌥L (macOS))
Highlight the specific section of code you want to reformat.
Press Ctrl + Alt + L (Windows/Linux) or ⌘ + ⌥ + L (macOS).
This will reformat the selected code according to your configured code style settings.
2. Reformatting the Entire File (Shortcut: Ctrl+Alt+Shift+L (Windows/Linux), ⌘⌥⇧L (macOS))
Open the file you want to reformat.
Press Ctrl + Alt + Shift + L (Windows/Linux) or ⌘ + ⌥ + ⇧ + L (macOS).
This will display a dialog where you can choose formatting options (e.g., reformat only changed lines) before applying the formatting to the entire file.
1. Reformatting a Selection (Shortcut: Ctrl+Alt+L (Windows/Linux), ⌘⌥L (macOS))
Highlight the specific section of code you want to reformat.
Press Ctrl + Alt + L (Windows/Linux) or ⌘ + ⌥ + L (macOS).
This will reformat the selected code according to your configured code style settings.
2. Reformatting the Entire File (Shortcut: Ctrl+Alt+Shift+L (Windows/Linux), ⌘⌥⇧L (macOS))
Open the file you want to reformat.
Press Ctrl + Alt + Shift + L (Windows/Linux) or ⌘ + ⌥ + ⇧ + L (macOS).
This will display a dialog where you can choose formatting options (e.g., reformat only changed lines) before applying the formatting to the entire file.
For navigating to source of something:
1. Click on the
2. Press Ctrl + Alt + B
#IntelliJ
1. Click on the
Function or ...2. Press Ctrl + Alt + B
#IntelliJ