Skip to content

Instantly share code, notes, and snippets.

Avatar
🏠
Working from home

Gustavo Guichard gustavoguichard

🏠
Working from home
  • Seasoned
  • Queensland, AU
View GitHub Profile
View useStore.js
import { useState, useEffect } from 'react'
function setState(newState, updateContext) {
this.state = { ...this.state, ...newState }
this.listeners &&
this.listeners.forEach(([context, listener]) => {
updateContext === context && listener(this.state)
})
}
View extract_emails
ruby -F, -ane \
'puts $F[15].gsub(/"/, "") unless $F[15] !~ /\w+@\w+\.\w{2,5}/' \
~/Desktop/cadastros.csv > emails.txt
View natural_sorting.js
import compact from 'lodash/compact'
import get from 'lodash/get'
import head from 'lodash/head'
import orderBy from 'lodash/orderBy'
const getFirstValue = (el, path) => {
const paths = path.split('|')
const values = paths.map(path => get(el, path))
return head(compact(values))
}
View useOpenExternalLinksInNewTab.js
const useOpenExternalLinksInNewTab = (el = typeof document === 'undefined' ? null : document) => {
useEffect(() => {
if (el && typeof window !== 'undefined') {
const links = el.querySelectorAll(
`a[href*="//"]:not([href*="${window.location.host}"])`,
)
links.forEach((link) => {
link.setAttribute('target', '_blank')
link.setAttribute('rel', 'noopener')
})
@gustavoguichard
gustavoguichard / Masonry.js
Created Nov 10, 2018
Masonry react component
View Masonry.js
import React, { cloneElement, memo } from 'react'
import times from 'lodash/times'
const Masonry = ({ columns, children, ...props }) => (
<div {...props} className="masonry-tile">
{times(columns, index => (
<div className="vert-tile" key={`tile-${index}`}>
{React.Children.toArray(children)
.filter(
(child, filterIndex) =>
@gustavoguichard
gustavoguichard / colors.js
Created Aug 25, 2017
Set of utilities for dealing with colors
View colors.js
import { chunk, join, map, repeat } from 'lodash'
const repeatArray = (array, size) => map(array, repeatVal(2))
const joinChunk = (array, size) => map(chunk(array, size), joinValues)
const repeatVal = size => val => repeat(val, size)
const hexToDec = hex => parseInt(hex, 16)
const joinValues = arr => join(arr, '')
export const hexToRGBA = (hex, alpha = 1) => {
const validColor =
View SmartGrid.js
import React, { cloneElement, PropTypes } from 'react'
import { map, chunk, uniqueId } from 'lodash'
export const SmartGrid = ({ columns = 3, minWidth = 'sm', children }) => {
const cols = parseInt(12 / columns, 10)
const join = (...classes) => classes.join(' ')
return (
<div>
{map(chunk(children, columns), (kids, index) =>
<div className="row" key={index}>
@gustavoguichard
gustavoguichard / Todo.elm
Last active May 12, 2016
Minimal todo app with Elm
View Todo.elm
module Todo exposing (..)
import Html exposing (..)
import Html.App as App
import Html.Attributes exposing (..)
import Html.Events exposing (..)
-- Model
@gustavoguichard
gustavoguichard / redux.js
Last active Sep 18, 2018
Minimal todo app with Redux from scratch
View redux.js
const { Component } = React
// Model
let nextTodoID = 0
// Update
@gustavoguichard
gustavoguichard / gist:e2f88c0adb157f194008
Created Jun 10, 2015
Bootstrap Dropdown inside React
View gist:e2f88c0adb157f194008
////////////////////////////////////////////////////////////////////////////////
// Exercise:
//
// http://getbootstrap.com/javascript/#dropdowns
//
// Wrap Bootstrap Dropdown in a React component and just rely on the declarative
//
// Got extra time?
//
// Allow the parent to manage the state of the dropdown