Yoav Niran yoavniran

📖

Writing. Code & Prose

R&D Team Lead @cloudinary & aspiring Sci-fi novelist. Creator of https://github.com/rpldy/react-uploady

yoavniran / App.jsx

Created May 21, 2020 21:31

React-Uploady preview with progress demo - app.jsx

	import Uploady from "@rpldy/uploady";
	import UploadWithProgressPreview from "./UploadWithProgressPreview";

	const App = > () {
	return (
	<Uploady
	destination={{ url: "[upload-url]" }}
	>
	<div className="App">
	<h1>Hello React Uploady</h1>

yoavniran / App.jsx

Created May 21, 2020 21:28

React-Uploady preview with progress demo

	import Uploady from "@rpldy/uploady";

	const App = > () {
	return (
	<Uploady
	destination={{ url: "[upload-url]" }}
	>
	<div className="App">
	<h1>Hello React Uploady</h1>
	<UploadWithProgressPreview />

yoavniran / simple.jsx

Created May 3, 2020 21:34

React-Uploady - Simple

	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 / customHookTestHelper.js

Last active June 3, 2020 12:54

helper to test custom hook (especially if it's using useEffect) with React, Jest & Enzyme

	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 / Image.js

Last active September 9, 2019 15:42

utility to generate breakpoints with cloudinary

	import {getResponsiveAttributes} from "../getResponsiveAttributes";

	const Image = ({publidId}) => {

	const transformation = [{
	quality: "auto",
	fetchFormat: "auto",
	dpr: 2,
	},];

yoavniran / RTLMarkdownWidget.js

Created July 25, 2019 10:51

right-to-left markdown widget for netlify-cms

	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 / PreviewLayout.js

Created July 25, 2019 08:55

PreviewLayout for Gatsby & Netlify CMS to enable styled-components

	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 / gatsby-netlify-form.js

Last active March 2, 2020 21:49

a gatsby-netlify contact form example

	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 / convertFromGridToInfiniteProps.js

Last active May 6, 2024 12:32

convert data from react-window Grid's onItemsRendered to data that react-window-infinite-loader's onItemsRendered understands

	onItemsRendered = (gridData: Object) => {
	const {useOverscanForLoading} = this.props; //default is true

	const {
	visibleRowStartIndex,
	visibleRowStopIndex,
	visibleColumnStopIndex,
	overscanRowStartIndex,
	overscanRowStopIndex,
	overscanColumnStopIndex

yoavniran / addFrameConsciousEvent.js

Created November 1, 2015 09:04

ES6 animation frame conscious event listener

	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);
	})