manivelarjunan’s gists

manivelarjunan / asyncComponent.js

Last active March 30, 2019 22:04

Higher order component for for lazy loading


	import React, {Component} from 'react';

	const asyncComponent = (importComponent) => {
	return class extends Component {
	state = {
	component : null
	};

	componentDidMount() {

manivelarjunan / App.js

Last active March 30, 2019 22:11

lazy loading with hoc

	import React, { Component} from 'react';
	import { BrowserRouter, Route, NavLink } from 'react-router-dom';

	import Welcome from './containers/Welcome';
	import Home from './containers/Home';
	import asyncComponent from './containers/hoc/asyncComponent';
	//import Details from './containers/Details';

	const AsyncComponent = asyncComponent(() => {
	// Pass the component which you want to load dynamically.

manivelarjunan / App.js

Last active March 30, 2019 22:15

Load component dynamically when click on button

	import React, { Component, Suspense } from 'react';
	import { BrowserRouter, Route, NavLink } from 'react-router-dom';
	import Welcome from './containers/Welcome';
	import Home from './containers/Home';
	//import Details from './containers/Details';

	const Details = React.lazy(() => import('./containers/Details'));

	class App extends Component {

manivelarjunan / App.js

Last active March 30, 2019 21:02

Lazy loading component with suspence

	import React, { Component, Suspense } from 'react';
	import { BrowserRouter, Route, NavLink } from 'react-router-dom';

	import Welcome from './containers/Welcome';
	import Home from './containers/Home';
	//import Details from './containers/Details';
	// Above import loads on load and adds dependencies globally. so it should be commented/removed for lazy loading component.
	const Details = React.lazy(() => import('./containers/Details'));
	// Lazy loading import doesn't allow Named component.
	class App extends Component {

manivelarjunan / App.js

Last active March 17, 2019 20:58

Class based component

	import React, { Component } from 'react';
	import Person from './Person/Person';
	import './App.css';

	class App extends Component {
	state = {
	persons: [
	{name:'mani',age:45},
	{name:'papi',age:34}
	]

manivelarjunan / App.js

Last active March 17, 2019 20:59

React hook - functional based component

	import React, { useState } from 'react';
	import Person from './Person/Person';
	import './App.css';

	//class App extends Component {
	const app = props => {
	const [personsState,setPersonState] = useState({
	persons: [
	{name:'mani',age:45},
	{name:'papi',age:34}

manivelarjunan / googleData.ts

Last active March 24, 2019 17:58

	export interface GoogleData {
	id: number;
	country: string;
	zipCode: string;
	}

manivelarjunan / reverse-pipe.pipe.spec.ts

Created December 2, 2018 22:44

	import { ReversePipe } from './reverse-value.pipe';

	// Isolated test case.
	describe('ReversePipe', () => {
	it('create an instance', () => {
	const pipe = new ReversePipe();
	expect(pipe).toBeTruthy();
	expect(pipe.transform('olleh')).toBe('hello');
	});
	});

manivelarjunan / reverse-value.pipe.ts

Created December 2, 2018 22:44

	import { Pipe, PipeTransform } from '@angular/core';

	@Pipe({
	name: 'reversePipe'
	})
	export class ReversePipe implements PipeTransform {
	transform(value: any, args?: any): any {
	return value
	.split('')
	.reverse()

manivelarjunan / user-async.service.ts

Created December 2, 2018 22:43

	import { Observable, Observer } from 'rxjs';

	export class UserAsyncService {
	user = { name: 'Mannie' };
	getUserDetails() {
	// Create an observables.
	const userObservables = Observable.create(
	(observer: Observer<{ name: string }>) => {
	setTimeout(() => {
	observer.next(this.user);