Skip to content

Instantly share code, notes, and snippets.

@hypervillain
hypervillain / addSubscriberToRevue.js
Last active October 5, 2018 16:28
Add Subscriber to Revue (https://getrevue.co) using Serverless (AWS Lambda)
'use strict';
/*
Before creating your service,
add your API key to serverless.yml file
For example, a valid conf:
service:
name: revue
provider:
@hypervillain
hypervillain / batchUploadcareUrls.js
Created June 13, 2018 13:57
Call Uploadcare with cross-fetch, failing on GCF
// line 41: public & private are your Uploadcare API keys
/*
Call is nodeJS script (pass) :
async function main() {
const res = await pushBatchUrlsToUploadCare(['123']);
console.log(res); // { err: { '123': 'Invalid' } }
}
@hypervillain
hypervillain / LinkifyDraftailEditor.jsx
Last active October 5, 2018 16:27
Linkify DraftTail Editor using decorators
// If you're using https://github.com/lokiuz/redraft,
// reuse these methods in your renderers module.
const urlRegex = (/((?:https?(?::\/\/))(?:www\.)?(?:[a-zA-Z\d-_.]+(?:\.[a-zA-Z\d]{2,})|localhost)(?:(?:[-a-zA-Z\d:%_+.~#!?&//=@]*)(?:[,](?![\s]))*)*)/g);
function findWithRegex(regex, contentBlock, callback) {
const text = contentBlock.getText();
let matchArr;
let start;
matchArr = regex.exec(text);
@hypervillain
hypervillain / Affix.jsx
Last active October 16, 2018 17:38
Generic React Affix component, using react-measure
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import Measure from 'react-measure';
import classnames from 'classnames';
// replace this if you don't use CSS modules
import cls from './affix.module.scss';
class Affix extends Component {
@hypervillain
hypervillain / DrawerLayoutWithReactRouter.jsx
Created October 12, 2018 16:36
Generic React layout that renders routes inside a drawer
// See it in action here https://codesandbox.io/s/mkznro61j
import React, { Component } from 'react';
import { render } from 'react-dom';
import PropTypes from 'prop-types';
import {
BrowserRouter,
Link,
@hypervillain
hypervillain / KeyListener.js
Last active October 13, 2018 10:49
A generic React component that listens to keyboard events
import { Component } from 'react';
import PropTypes from 'prop-types';
/*
Example:
<KeyListener
actions={[
{
keyCode: 27,
method: (e) => {
@hypervillain
hypervillain / ForwardRef.jsx
Created October 16, 2018 17:26
A generic React component that forwards its ref
import { Component } from 'react';
import PropTypes from 'prop-types';
class ForwardRef extends Component {
static propTypes = {
children: PropTypes.func.isRequired,
ComponentWrapper: PropTypes.string || PropTypes.node,
refPropName: PropTypes.string,
}
static defaultProps = {
@hypervillain
hypervillain / ForwardScroll.jsx
Created October 16, 2018 17:36
A generic React component that forwards document's scroll Y and X positions
// See it in action here: https://codesandbox.io/s/ovyk4qx8yy
import React, { Component } from 'react';
import PropTypes from 'prop-types';
class ForwardScroll extends Component {
static propTypes = {
children: PropTypes.func.isRequired,
ComponentWrapper: PropTypes.node || PropTypes.string,
}
@hypervillain
hypervillain / ForwardState.jsx
Last active October 24, 2018 15:19
A generic React component that renders its state and setState as props
import { Component } from 'react';
import PropTypes from 'prop-types';
class ForwardState extends Component {
static propTypes = {
children: PropTypes.func.isRequired,
ComponentWrapper: PropTypes.string || PropTypes.node,
init: PropTypes.object, // eslint-disable-line react/forbid-prop-types
setStatePropName: PropTypes.string,
statePropName: PropTypes.string,
@hypervillain
hypervillain / ForwardProximity.js
Last active November 16, 2018 01:31
A generic React component that calculates and forwards the distance between mouse position and element
import { Component } from 'react';
import { func } from 'prop-types';
// See related Gist
import MousePosListener from '../MousePosListener';
const distancePoints = (x1, y1, x2, y2) =>
Math.sqrt((x1 - x2) * (x1 - x2) + (y1 - y2) * (y1 - y2));
class ForwardProximity extends Component {