Skip to content

Instantly share code, notes, and snippets.

View pleunv's full-sized avatar
:shipit:

Pleun Vanderbauwhede pleunv

:shipit:
View GitHub Profile
@rzane
rzane / Field.js
Created November 14, 2017 15:12
<Field /> component that supports nested values for formik
import React from 'react';
import PropTypes from 'prop-types';
import { set, get } from 'lodash/fp';
/**
* This is a copy-pasta job of Formik's Field component. It's needed in
* order to handle nested values. Future versions of formik will support
* this.
*/
@gunar
gunar / await-to-js-no-throw.js
Last active January 5, 2021 00:26
Async Control Flow without Exceptions nor Monads
'use strict'
const toUpper = async string => {
if (string === 'invalid') return [Error('Invalid input')]
return [null, string.toUpperCase()]
}
const errorHandler = () => { console.log('There has been an error. I\'ll handle it.') }
const print = console.log
const foo = async input => {
@danseethaler
danseethaler / StyledButton.js
Last active July 5, 2017 19:20
A styled css-in-js button
('use strict');
import React from 'react';
import glamorous from 'glamorous';
const colors = {
success: '#29A88E',
danger: '#C65F4A',
primary: '#6DCFD3',
info: '#FFD035',
@tkh44
tkh44 / Animation.jsx
Last active September 13, 2022 01:31
react-router v4 animated with data-driven-motion
import React from 'react'
import { BrowserRouter as Router, Route, Link, Redirect, matchPath } from 'react-router-dom'
import { Motion } from 'data-driven-motion' // https://github.com/tkh44/data-driven-motion
const WOBBLY_SPRING = { stiffness: 200, damping: 15, precision: 0.1 }
const AnimationExample = () => (
<Router>
<div>
<ul>
@jazlalli
jazlalli / React-callback-example.jsx
Last active December 22, 2016 10:44
What is the "ideal" way to pass data to a callback prop? An inline function callback which invokes the prop? Or use prop as is and attach data to the event object?
// inline event handler which invokes callback prop
const UsingAnInlineFunction = ({
itemId,
itemName,
itemCount,
onClick
}) => (
<div onClick={() => onClick(itemId)}>
<span>{`${itemCount}x ${itemName}`}</span>
</div>
@vladimirsiljkovic
vladimirsiljkovic / select.css
Last active November 26, 2022 09:59
Cross-browser (IE11+) <select> element styling without wrapper <div> https://jsbin.com/diqene/edit?html,css,output
select {
-webkit-appearance: none; /* Webkit */
-moz-appearance: none; /* FF */
-ms-appearance: none; /* Edge */
appearance: none; /* Future */
/* Optional styles */
padding: 0.3em 1.5em 0.3em 0.6em;
border: 1px solid currentColor;
background: white;
@joepie91
joepie91 / promises-faq.md
Last active June 25, 2023 09:02
The Promises FAQ - addressing the most common questions and misconceptions about Promises.
@markerikson
markerikson / redux-orm-normalization.js
Last active February 2, 2019 20:57
Redux-ORM nested data normalization
import {fk, many, Model} from 'redux-orm';
class Book extends Model {
static get fields() {
authors: many('Author', 'books'),
publisher: fk('Publisher', 'books'),
}
static parse(data) {
/*
@thevangelist
thevangelist / my-component.spec.js
Created August 4, 2016 13:06
The only React.js component test you'll ever need (Enzyme + Chai)
import React from 'react';
import { shallow } from 'enzyme';
import MyComponent from '../src/my-component';
const wrapper = shallow(<MyComponent/>);
describe('(Component) MyComponent', () => {
it('renders without exploding', () => {
expect(wrapper).to.have.length(1);
});
@avanderhoorn
avanderhoorn / dark.tcss
Last active December 4, 2017 14:46
CSS Modules Themes using CSS Variables
:root {
--alt-color: #111;
--main-color: #000;
--status-bar-background-color: #222;
--status-bar-font-color: #333;
}