A tweet-sized debugger for visualizing your CSS layouts. Outlines every DOM element on your page a random (valid) CSS hex color.
One-line version to paste in your DevTools
Use $$
if your browser aliases it:
~ 108 byte version
// create a React context Provider/Consumer pair that | |
// validates the consumer is rendered within a provider | |
function createRequiredContext(name) { | |
const Context = React.createContext() | |
function Consumer(props) { | |
return ( | |
<Context.Consumer {...props}> | |
{val => { | |
if (!val) { |
import React from 'react' | |
function Login({onSubmit}) { | |
return ( | |
<div> | |
<form | |
data-test="login-form" | |
onSubmit={e => { | |
e.preventDefault() | |
const {username, password} = e.target.elements |
// Based on http://stackoverflow.com/a/10520017/1307721 and http://stackoverflow.com/a/16022728/1307721 | |
Podium = {}; | |
Podium.keydown = function(k) { | |
var oEvent = document.createEvent('KeyboardEvent'); | |
// Chromium Hack | |
Object.defineProperty(oEvent, 'keyCode', { | |
get : function() { |
/* eslint-disable no-console */ | |
import Perf from 'react-addons-perf'; | |
import sinon from 'sinon'; | |
/** | |
* Counts the number of DOM operations that occurred while executing `fn`. | |
* | |
* Example usage: | |
# import React from 'react'; | |
# import ReactDOM from 'react-dom'; |
react + redux + RR
It uses https://gist.github.com/iNikNik/3c1b870f63dc0de67c38 for stores and actions.
1) create redux
const redux = createRedux(state);
2) get requireAccess func => bindCheckAuth to redux