Skip to content

Instantly share code, notes, and snippets.

View JoaoCnh's full-sized avatar
🎯
Focusing

João Cunha JoaoCnh

🎯
Focusing
View GitHub Profile
@JoaoCnh
JoaoCnh / songs.js
Created February 14, 2018 09:22
js song object
const songs = [
{
id: 1,
name: "Curl of the Burl",
artist: "Mastodon",
},
{
id: 2,
name: "Oblivion",
artist: "Mastodon",
@JoaoCnh
JoaoCnh / map.js
Last active February 1, 2020 21:45
js map example
var allSongNames = songs.map(function (song) {
return song.name;
});
// ES6
const allSongNames = songs.map(song => {
return song.name;
});
console.log(allSongNames); // ["Curl of the Burl","Oblivion","Flying Whales","L'Enfant Sauvage"];
@JoaoCnh
JoaoCnh / mouse.js
Created February 5, 2018 16:26
Mouse Render Prop
class Mouse extends React.Component {
constructor(props) {
super(props);
this.handleMouseMove = this.handleMouseMove.bind(this);
this.state = { x: 0, y: 0 };
}
handleMouseMove(event) {
this.setState({
x: event.clientX,
@JoaoCnh
JoaoCnh / hoc.js
Created February 5, 2018 15:45
HOC usage
@withI18n
class MyComponent extends Component {
render() {
return <div>{this.props.locale}</div>
}
}
// or -- depending on your decorator usage
class MyComponent extends Component {
@JoaoCnh
JoaoCnh / i18n.js
Created February 5, 2018 15:42
Localization HOC for I18nProvider
import React, { Component } from "react";
import PropTypes from "prop-types";
const withI18n = ComponentToWrap => {
return class I18nComponent extends Component {
static contextTypes = {
t: PropTypes.func.isRequired,
locale: PropTypes.string.isRequired
};
@JoaoCnh
JoaoCnh / i18n.js
Created February 5, 2018 15:31
Localization Provider
import React, { Component } from "react";
import PropTypes from "prop-types";
import Polyglot from "node-polyglot";
// for example
import translations from "../my-translations.json";
class I18nProvider extends Component {
static propTypes = {
locale: PropTypes.string.isRequired,
@JoaoCnh
JoaoCnh / Avatar.js
Created January 31, 2018 00:32
Avatar shouldComponentUpdate
import React from "react";
export default class Avatar extends React.Component {
state = {
open: false,
};
shouldComponentUpdate(nextProps, nextState) {
const photoChanged = this.props.avatarUrl !== nextProps.avatarUrl;
const optionsWereToggled = this.state.open !== nextState.open;
@JoaoCnh
JoaoCnh / Form.js
Created January 19, 2018 10:35
Submitting forms with React
import React from "react";
import { Formik, Form, Field } from "formik";
import yup from "yup";
class Form extends React.Component {
state = { error: false };
_submit = async (values, { setSubmitting }) => {
// build form data
const formData = new FormData();
@JoaoCnh
JoaoCnh / AjaxForm.js
Last active January 22, 2018 09:23
Ajax Form Component
import React from "react";
import PropTypes from "prop-types";
class AjaxForm extends React.Component {
static propTypes = {
type: PropTypes.string.isRequired,
url: PropTypes.string.isRequired,
onSuccess: PropTypes.func.isRequired,
};
@JoaoCnh
JoaoCnh / comp.js
Created January 19, 2018 00:52
React Comp
<List
url="https://api.github.com/users/JoaoCnh/repos"
render={({ list, isLoading }) => (
<div>
<h2>My repos</h2>
{isLoading && <h2>Loading...</h2>}
<ul>
{list.length > 0 && list.map(repo => (
<li key={repo.id}>