Skip to content

Instantly share code, notes, and snippets.

Avatar
📖
Writing. Code & Prose

Yoav Niran yoavniran

📖
Writing. Code & Prose
View GitHub Profile
@yoavniran
yoavniran / App.jsx
Created May 21, 2020
React-Uploady preview with progress demo
View App.jsx
import Uploady from "@rpldy/uploady";
const App = > () {
return (
<Uploady
destination={{ url: "[upload-url]" }}
>
<div className="App">
<h1>Hello React Uploady</h1>
<UploadWithProgressPreview />
@yoavniran
yoavniran / simple.jsx
Created May 3, 2020
React-Uploady - Simple
View simple.jsx
import React from "react";
import Uploady from "@rpldy/uploady";
import UploadButton from "@rpldy/upload-button";
const MyApp = () => (
<Uploady destination={{url: "https://my-server.com/upload"}}>
<UploadButton/>
</Uploady>
);
@yoavniran
yoavniran / customHookTestHelper.js
Last active Jun 3, 2020
helper to test custom hook (especially if it's using useEffect) with React, Jest & Enzyme
View customHookTestHelper.js
import React from "react";
import { isFunction } from "lodash";
import { mount } from "enzyme";
export default (hook, props) => {
let wrapper, hookResult, hookParams, error;
if (isFunction(props)) {
hookParams = props;
props = {};
@yoavniran
yoavniran / Image.js
Last active Sep 9, 2019
utility to generate breakpoints with cloudinary
View Image.js
import {getResponsiveAttributes} from "../getResponsiveAttributes";
const Image = ({publidId}) => {
const transformation = [{
quality: "auto",
fetchFormat: "auto",
dpr: 2,
},];
@yoavniran
yoavniran / RTLMarkdownWidget.js
Created Jul 25, 2019
right-to-left markdown widget for netlify-cms
View RTLMarkdownWidget.js
import React from "react";
import NetlifyCmsWidgetMarkdown from "netlify-cms-widget-markdown";
const name = "rtlmarkdown";
const PreviewComponent = NetlifyCmsWidgetMarkdown.previewComponent;
const OrgControlComponent = NetlifyCmsWidgetMarkdown.controlComponent;
const ControlComponent = React.forwardRef((props, ref) => {
return <div dir="rtl">
@yoavniran
yoavniran / PreviewLayout.js
Created Jul 25, 2019
PreviewLayout for Gatsby & Netlify CMS to enable styled-components
View PreviewLayout.js
import React, { useRef, useLayoutEffect } from "react";
import { StyleSheetManager } from "styled-components";
import PreviewContext from "./PreviewContext";
const WithPreviewContext = ({ children }) =>
<PreviewContext.Provider value={true}>
<main>
{children}
</main>
</PreviewContext.Provider>;
@yoavniran
yoavniran / gatsby-netlify-form.js
Last active Mar 2, 2020
a gatsby-netlify contact form example
View gatsby-netlify-form.js
import React, { useContext, useState, } from "react";
import { navigate } from "gatsby";
import styled from "styled-components";
import { Box, Button } from "grommet";
import ReCaptcha from "react-google-recaptcha";
import { NotificationContext } from "../Notifications/NotificationProvider";
const isDev = process.env.NODE_ENV === "development";
const onRegisterSuccess = (navUrl) => {
@yoavniran
yoavniran / convertFromGridToInfiniteProps.js
Last active Dec 29, 2019
convert data from react-window Grid's onItemsRendered to data that react-window-infinite-loader's onItemsRendered understands
View convertFromGridToInfiniteProps.js
onItemsRendered = (gridData: Object) => {
const {useOverscanForLoading} = this.props; //default is true
const {
visibleRowStartIndex,
visibleRowStopIndex,
visibleColumnStopIndex,
overscanRowStartIndex,
overscanRowStopIndex,
overscanColumnStopIndex
@yoavniran
yoavniran / addFrameConsciousEvent.js
Created Nov 1, 2015
ES6 animation frame conscious event listener
View addFrameConsciousEvent.js
const addFrameConsciousEvent = (obj, event, handler) => { //adapted from: https://developer.mozilla.org/en-US/docs/Web/Events/resize#Example
let isRunning = false;
const handlerWrapper = (e)=> {
if (!isRunning){
isRunning = true;
requestAnimationFrame(()=>{ //throttling so only execute when the browser is ready to re-render
isRunning = false;
handler(e);
})
@yoavniran
yoavniran / promiseActions.js
Last active May 11, 2018
promise actions - run methods in sequence or parallel using the power of JS Promises
View promiseActions.js
/**
* accepts n methods in sequence as arguments and returns a promise that is resolved
* once all methods finish.
* any argument may be an array of methods instead of a method itself. in this case, the array methods
* will be run in parallel
* any of the passed in methods may return a promise or any other type
*
* the results of the previous methods is handed over to the next method
*
* the last parameter may be an object containing one or both: {context, data}