Mohammad Esmaeilzadeh buglessir

Front-end (React) Developer ◾ buglessir.medium.com ◾ codepen.io/buglessir ◾ npmjs.com/~m.esmaeilzadeh ◾

buglessir / styled-component-global-styles.js

Created March 5, 2022 13:31

An example of GlobalStyles with styled-components

	import { createGlobalStyle } from 'styled-components';

	const GlobalStyles = createGlobalStyle`
	body {
	overflow-y: hidden;
	}
	`;

	const PageWithoutScrollbar = () => {
	return (

buglessir / react-query-object.js

Created February 28, 2022 07:32

An example for the Query Object in react-query

	// (1) ----------> Query Object for the useQuery();

	import { fetchListFunction } from './services';

	export const FetchListObj = (key, config) => ({
	queryKey: ['FetchList', key],
	queryFn: () => fetchListFunction,
	placeholderData: {
	list: []
	},

buglessir / react-memory-leaks.js

Created February 20, 2022 09:12

3 ways to fix Memory Leaks in React web application

	// 1) Using Boolean flag:

	const [value, setValue] = useState('');
	useEffect(() => {
	let isMounted = true;
	fetchValue().then(() => {
	if (isMounted) {
	setValue('done!'); // no more error
	}
	});

buglessir / react-query example

Created November 8, 2021 13:37

	import React from 'react';
	import { render } from 'react-dom';
	import { QueryClientProvider, QueryClient, useQuery } from 'react-query';

	const URL = 'https://randomuser.me/api/?results=5&inc=name';

	const One = () => {
	const { error, data, isLoading, refetch } = useQuery('test', () =>
	fetch(URL).then(response => response.json())
	);

buglessir / Download and show one by one Images with JavaScript and Promise

Created December 6, 2020 07:46

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
	img{
	width: 150px;
	height: auto;

buglessir / load images one by one

Created December 6, 2020 07:20

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
	img{
	width: 150px;
	height: auto;

buglessir / React Upload file axios

Created December 18, 2019 11:46

	import React from 'react';
	import { render } from 'react-dom';
	import axios from 'axios';

	class App extends React.Component {
	constructor(props) {
	super(props);
	this.state = {
	selectedFile: null,
	percent: 0

buglessir / React Upload file component

Created December 18, 2019 11:25

	import React from 'react';
	import { render } from 'react-dom';

	class App extends React.Component {
	onChangeFile = (e) => {
	this.setState({
	selectedFile: e.target.files[0]
	});
	}

buglessir / gist:f057a53ea4760500264c979426163a63

Last active October 29, 2019 13:20

	import React from 'react';
	import ReactDOM from 'react-dom';
	import { BrowserRouter, Switch, Route, Link, Redirect } from 'react-router-dom';

	function Auth() {
	return false;
	}

	const Admin = () => (
	<h1>This is Admin page</h1>

buglessir / gist:e8353054f6af80c6f544518a4eeb7db3

Created October 28, 2019 09:10

	import React from 'react';
	import ReactDOM from 'react-dom';
	import { BrowserRouter, Switch, Route, Link } from 'react-router-dom';

	const NotFound = () => (
	<h1>404 - Page NotFound !</h1>
	)

	const Home = () => (
	<h1>Home</h1>