Andy Tsai bbandydd

bbandydd / with_lazy.js

Created November 20, 2018 08:04

Component loading with Lazy

	import React, { Suspense, lazy } from 'react';
	import { HashRouter as Router, Route, Link } from 'react-router-dom';

	const Home = lazy(() => import('./Home'));
	const Page1 = lazy(() => import('./Page1'));

	function WaitingComponent(Component) {
	return props => (
	<Suspense fallback={<div>Loading...</div>}>
	<Component {...props} />

bbandydd / without_lazy.js

Created November 20, 2018 08:01

loading component without lazy

	import React, { Suspense, lazy } from 'react';
	import { HashRouter as Router, Route, Link } from 'react-router-dom';
	import Home from './Home';
	import Page1 from './Page1';

	export default () => (
	<Router>
	<div>
	<Route exact path="/">
	<Link style={{marginRight: '30px'}} to="/">Home</Link>

bbandydd / getNestedValue.js

Last active August 30, 2018 03:37

get Nested Object value without using if conditions

bbandydd / index.html

Last active May 3, 2018 04:01

Parcel React

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
	</head>
	<body>
	<div id="app"></div>

bbandydd / gist:c2833ee7e848a6bebc0550c70f4db7ac

Created February 3, 2018 14:22

Dimensions detect orientation

	import React, { Component } from 'react';
	import {
	Platform,
	StyleSheet,
	Text,
	View,
	Dimensions,
	} from 'react-native';
	import styled from 'styled-components/native';

bbandydd / gist:668bafc3f0e76ad3dacf4d61110f7756

Created February 3, 2018 14:16

Add height = 20 white view

	const StatusBarBackground = styled.View`
	height: 20;
	backgroundColor: #fff;
	`;

bbandydd / gist:92871ceb9226c4193417f7ead60c5ca5

Created February 3, 2018 14:02

Styled-Component detect device

	const MainView = styled.View`
	backgroundColor: ${Platform.OS === 'ios' ? 'black' : 'red'};
	`;

bbandydd / HOC-disadvantage1

Created December 17, 2017 12:45

HOC-disadvantage1

	// without {...this.props}
	const HOC = (WrappedComponent) => {
	return class extends Component {
	render() {
	return (
	<WrappedComponent />
	)
	}
	}
	}

bbandydd / React-HOC

Created December 17, 2017 12:28

React Higher-Order-Component withMouse

	import React, { Component } from 'react';
	import PropTypes from 'prop-types';

	const withMouse = (WrappedComponent) => {
	return class extends Component {
	state = {
	x: 0,
	y: 0,
	}