Skip to content

Instantly share code, notes, and snippets.

🏠
Working from home

Gustavo Guichard gustavoguichard

🏠
Working from home
Block or report user

Report or block gustavoguichard

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
@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
View gist:7e2bac7340c9494fc735
import React from 'react';
import $ from 'jquery';
require('bootstrap-webpack');
var Dropdown = React.createClass({
componentDidMount() {
$(this.getDOMNode).on('shown.bs.dropdown', function(event){
this.props.onChange(true);
}.bind(this));
$(this.getDOMNode).on('hidden.bs.dropdown', function(event){
@gustavoguichard
gustavoguichard / ImageUploaderEs6.js
Last active Dec 28, 2017
React + Rails image uploader component
View ImageUploaderEs6.js
import React, { Proptypes, Component } from 'react'
import { classNames } from 'neighborly-components'
class ImageUploader extends Component {
static propTypes = {
associations: PropTypes.string,
fieldName: PropTypes.string.isRequired,
label: PropTypes.string,
message: PropTypes.string,
model: PropTypes.string.isRequired
View config.yml
development: &defaults
ADMIN_EMAIL: 'gustavoguichard@gmail.com'
test: &development
<<: *defaults
production:
<<: *defaults
@gustavoguichard
gustavoguichard / booking.js
Last active Jan 4, 2016
booking assignment
View booking.js
jQuery(function() {
var json = [{name: "Moscow", count: 12, content: "<p>Moscow is the capital city and the most populous federal subject of <b>Russia</b>. The city is a major political, economic, cultural and scientific center in Russia and in Eurasia.</p>"}, {name: "Amsterdam", count: 25, content: "<p>Amsterdam is the capital and most populous city of the <b>Netherlands</b>. Its status as the Dutch capital is mandated by the Constitution of the Netherlands though it is not the seat of the Dutch government, which is at the Hague. </p>"}, {name: "Lisbon", count: 15, content: "<p>Lisbon is the largest city and capital of <b>Portugal</b> with a population of 547,631 within its administrative limits on a land area of 84.8 square kilometers.</p>"}, {name: "Berlin", count: 19, content: "<p>Berlin is the capital city of <b>Germany</b> and one of the 16 states of Germany. With a population of 3.3 million people, Berlin is Germany's largest city and is the second most populous city proper and the seventh most popul
You can’t perform that action at this time.