Skip to content

Instantly share code, notes, and snippets.

🎯
Focusing

Mohan Dere mohandere

🎯
Focusing
Block or report user

Report or block mohandere

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
View hoc-caveat-02-fix.js
import hoistNonReactStatic from 'hoist-non-react-statics';
const withSearch = (WrappedComponent) => {
class WithSearch extends React.Component {/*...*/}
hoistNonReactStatic(EithSearch, WrappedComponent);
return WithSearch;
}
// Define a static method
ProductsList.staticMethod = function() {/*...*/}
View hoc-caveat-01.js
render() {
// A new version of ProductsListWithSearch is created on every render
const ProductsListWithSearch = withSearch(ProductsList);
// That causes the entire subtree to unmount/remount each time!
return <ProductsListWithSearch />;
}
@mohandere
mohandere / hoc-withSearch.js
Last active May 12, 2019
Higher-Order Components
View hoc-withSearch.js
const withSearch = WrappedComponent => {
class WithSearch extends React.Component {
state = {
searchTerm: ""
};
handleSearch = event => {
this.setState({ searchTerm: event.target.value });
};
render() {
@mohandere
mohandere / hoc-ProductsList.js
Last active May 12, 2019
Higher-Order Component
View hoc-ProductsList.js
const ProductsList = (props) => {
let { data: products } = props;
return (
<div>
<div>
<div>
<h2>Products</h2>
</div>
</div>
<div>
@mohandere
mohandere / hoc-ProductsWithSearch.js
Last active May 12, 2019
Higher-Order Component
View hoc-ProductsWithSearch.js
import products from './products.json'
class ProductsListWithSearch extends React.PureComponent {
state = {
searchTerm: ''
}
handleSearch = event => {
this.setState({ searchTerm: event.target.value })
}
render() {
View hoc-ProductCard.js
const ProductCard = props => {
return (
<div className="product">
<p>
<b>Title:</b> {props.title}
</p>
<p>
<b>Style:</b> {props.style}
</p>
<p>
@mohandere
mohandere / hoc-ppHOC.js
Last active May 7, 2019
Higher Order Components
View hoc-ppHOC.js
const propsProxyHOC = (WraapperComponent) => {
return class extends React.Component {
state = {
count: 0
}
render() {
// Pass thru the props that the HOC receives
return <WraapperComponent {...this.props} {...this.state} />
}
}
View hoc-withSearch-full-example.js
const ProductCard = props => {
return (
<div>
<hr />
<p>
<b>Title:</b> {props.title}
</p>
<p>
<b>Style:</b> {props.style}
</p>
@mohandere
mohandere / hoc-hof.js
Created May 4, 2019
Higher-Order Components
View hoc-hof.js
// Example #1
const twice = (f, v) => f(f(v))
const add3 = v => v + 3
twice(add3, 7) // 13
// Example #2
const filter = (predicate, xs) => xs.filter(predicate)
const is = type => x => Object(x) instanceof type
@mohandere
mohandere / hoc-signature.js
Last active May 4, 2019
Higher-Order Components
View hoc-signature.js
import React from 'react'
const higherOrderComponent = WrappedComponent => {
class HOC extends React.Component {
render() {
return <WrappedComponent />
}
}
return HOC
}
You can’t perform that action at this time.