Skip to content

Instantly share code, notes, and snippets.

gaearon / slim-redux.js
Last active May 30, 2023 02:48
Redux without the sanity checks in a single file. Don't use this, use normal Redux. :-)
View slim-redux.js
function mapValues(obj, fn) {
return Object.keys(obj).reduce((result, key) => {
result[key] = fn(obj[key], key);
return result;
}, {});
function pick(obj, fn) {
return Object.keys(obj).reduce((result, key) => {
if (fn(obj[key])) {
gaearon / connect.js
Last active April 26, 2023 02:22
connect.js explained
View connect.js
// connect() is a function that injects Redux-related props into your component.
// You can inject data and callbacks that change that data by dispatching actions.
function connect(mapStateToProps, mapDispatchToProps) {
// It lets us inject component as the last step so people can use it as a decorator.
// Generally you don't need to worry about it.
return function (WrappedComponent) {
// It returns a component
return class extends React.Component {
render() {
return (
insin / .jshintrc
Last active April 11, 2023 12:56
Template for HTA / browser React apps
View .jshintrc
"browser": true,
"node": true,
"curly": true,
"devel": true,
"globals": {
"ActiveXObject": true,
"async": true,
"moment": true,
alekseykulikov /
Last active March 15, 2023 01:49
Principles we use to write CSS for modern browsers

Recently CSS has got a lot of negativity. But I would like to defend it and show, that with good naming convention CSS works pretty well.

My 3 developers team has just developed React.js application with 7668 lines of CSS (and just 2 !important). During one year of development we had 0 issues with CSS. No refactoring typos, no style leaks, no performance problems, possibly, it is the most stable part of our application.

Here are main principles we use to write CSS for modern (IE11+) browsers:

alexeisavca / ReactIgnore
Last active March 12, 2023 12:24
A simple component to make ReactJs ignore subtrees
View ReactIgnore
var React = require('react/addons');
var ReactIgnore = {
displayName: 'ReactIgnore',
shouldComponentUpdate (){
return false;
render (){
return React.Children.only(this.props.children);
threepointone / gist:43f16389fd96561a8b0b
Last active February 13, 2023 02:12
sto alternate api
View gist:43f16389fd96561a8b0b
// store.js
let {store, handler} = sto(initialState, reduceFn); // where reduceFn: function(currentState, action, ...args){}
export store;
// elsewhere
store.get() // -> current state
store.toObservable() // -> to be used with .observe()
sebmarkbage /
Last active January 9, 2023 22:47
React (Virtual) DOM Terminology
thevangelist / my-component.spec.js
Created August 4, 2016 13:06
The only React.js component test you'll ever need (Enzyme + Chai)
View my-component.spec.js
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', () => {
sebmarkbage /
Last active August 2, 2022 10:44
Deprecating transferPropsTo

Deprecating transferPropsTo

It's a common pattern in React to wrap a component in an abstraction. The outer component exposes a simple property to do something that might have more complex implementation details.

We used to have a helper function called transferPropsTo. We no longer support this method. Instead you're expected to use a generic object helper to merge props.

render() {
 return Component(Object.assign({}, this.props, { more: 'values' }));
gaearon / observeStore.js
Last active May 19, 2022 10:55
Wait for some condition to become true on a Flux store, useful for react-router async transition hooks
View observeStore.js
// Usage example:
// willTransitionTo(transition, params, query, callback) {
// observeStore(DraftStore, s => s.isLoaded()).then(() => {
// if (DraftStore.isMissingTitle()) {
// transition.redirect('composeDraft', params);
// }
// }).finally(callback);
// }