Skip to content

Instantly share code, notes, and snippets.

Avatar
🎯
Focusing

Mohan Dere mohandere

🎯
Focusing
View GitHub Profile
@mohandere
mohandere / settings.json
Created Aug 20, 2019
Sublime 3 user settings
View settings.json
{
"always_show_minimap_viewport": true,
"bold_folder_labels": true,
"caret_extra_bottom": 1,
"caret_extra_top": 1,
"caret_extra_width": 1,
"caret_style": "blink",
"color_scheme": "Packages/Colorsublime - Themes/LAZY.tmTheme",
"create_window_at_startup": false,
"fade_fold_buttons": false,
@mohandere
mohandere / settings.json
Created Aug 20, 2019
VS code editor 2019 settings mac os
View settings.json
// Place your settings in this file to overwrite the default settings
{
"editor.wordWrap": "on",
"editor.tabSize": 2,
"editor.mouseWheelZoom": false,
"guides.enabled": false,
"terminal.integrated.fontSize": 17,
"editor.fontSize": 20,
"window.zoomLevel": 0,
"sublimeTextKeymap.promptV3Features": true,
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>
You can’t perform that action at this time.