💻

Focusing

Rishikesh Vedpathak RishikeshVedpathak

💻

Focusing

18 followers · 6 following

View GitHub Profile

Recently created

Least recently created

Recently updated

Least recently updated

RishikeshVedpathak / query-key.js

Created May 15, 2021 19:46

	import { useState } from "react";
	import { useQuery } from "react-query";

	const fetchMovieList = (searchText) => {
	return fetch(`https://www.omdbapi.com/?s=${searchText}&apikey=${API_KEY}`)
	.then(response => response.json());
	}

	function App() {
	const [searchText, setSearchText] = useState("");

RishikeshVedpathak / fetch-movies-simple.js

Created May 15, 2021 19:22

	import { useQuery } from "react-query";

	function App() {
	const { isLoading, isError, data, error } = useQuery('movies', fetchMovieList)
	}

RishikeshVedpathak / fetch-movies.js

Last active May 15, 2021 19:29

	import { useQuery } from "react-query";

	function App() {
	const { isLoading, isError, data, error } = useQuery('movies', fetchMovieList)

	if (isLoading) {
	return <span>Loading...</span>
	}

	if (isError) {

RishikeshVedpathak / react-query-devtools.js

Created May 15, 2021 18:51

	import { ReactQueryDevtools } from 'react-query/devtools'

	function App() {
	return (
	<QueryClientProvider client={queryClient}>
	{/* The rest of your application */}
	<ReactQueryDevtools initialIsOpen={false} />
	</QueryClientProvider>
	)
	}

RishikeshVedpathak / react-responsive-demo-home.js

Created February 29, 2020 16:16

	import React from "react";
	import withResponsive from "../../hoc/responsive";

	const Home = (props) => {
	const Yes = () => <span style={{ color: "#5cb85c" }}>YES</span>;
	const No = () => <span style={{ color: "#d9534f" }}>NO</span>;

	return (
	<>
	<div>

RishikeshVedpathak / react-responsive-demo.js

Created February 29, 2020 16:13

	/**
	* This is an HOC. Use this 'withResponsive' hoc component for responsive UI.
	*/

	import React from "react";
	import { useMediaQuery } from "react-responsive";

	const withResponsive = (Component) => {

	return function (props) {

RishikeshVedpathak / react-responsive.js

Created February 29, 2020 16:09

react-responsive use case

	import React from 'react'
	import { useMediaQuery } from 'react-responsive'

	const Example = () => {
	const isDesktopOrLaptop = useMediaQuery({
	query: '(min-device-width: 1224px)'
	})
	const isBigScreen = useMediaQuery({ query: '(min-device-width: 1824px)' })
	const isTabletOrMobile = useMediaQuery({ query: '(max-width: 1224px)' })
	const isTabletOrMobileDevice = useMediaQuery({

RishikeshVedpathak / Home.js

Created December 10, 2019 11:30

Update data in Context

	import React, { useContext } from "react"
	import AppContext from "../../Store"

	export default () => {
	const cartContext = useContext(AppContext);

	const handleCartUpdate = (id) => {
	const productsState = cartContext.data.products.map(product => ({ ...product, addedToCart: (product.id === id ? !product.addedToCart : product.addedToCart) }));
	cartContext.updateData({ products: productsState });
	}

RishikeshVedpathak / App.js

Created December 10, 2019 11:21

Tell your application to use this context.

	import React, { useState } from 'react'
	import { ContextProvider } from "./Store"
	import { products } from "./constants/data"

	import AppRouter from './components/AppRouter';

	function App() {
	const [contextData, setContextData] = useState({
	data: {
	products: products.map(product => ({ ...product, addedToCart: false }))

RishikeshVedpathak / Store.js

Created December 10, 2019 11:17

How to create context for your application

	import React from "react";

	const AppContext = React.createContext({});

	export const ContextProvider = AppContext.Provider
	export const ContextConsumer = AppContext.Consumer
	export default AppContext

NewerOlder