Skip to content

Instantly share code, notes, and snippets.

📖
writing. mostly code

Yoav Niran yoavniran

📖
writing. mostly code
View GitHub Profile
@yoavniran
yoavniran / ItemPreviewWithCrop.jsx
Last active Jul 8, 2020
ItemPreviewWithCrop.jsx - react-uploady demo
View ItemPreviewWithCrop.jsx
import ReactCrop from "react-image-crop";
import { withRequestPreSendUpdate, useItemFinalizeListener } from "@rpldy/uploady";
import { PREVIEW_TYPES } from "@rpldy/upload-preview";
import cropImage from "./image-crop-helper";
const ItemPreviewWithCrop = withRequestPreSendUpdate(props => {
const { id, url, isFallback, type, updateRequest, requestData, previewMethods } = props;
const [finished, setFinished] = useState(false);
const [crop, setCrop] = useState(null);
@yoavniran
yoavniran / UploadWithCrop.jsx
Last active Jul 8, 2020
UploadWithCrop.jsx - react-uploady demo
View UploadWithCrop.jsx
import Uploady from "@rpldy/uploady";
import UploadButton from "@rpldy/upload-button";
import UploadPreview from "@rpldy/upload-preview";
export default function UploadWithCrop() {
const previewMethodsRef = useRef();
return (
<Uploady
destination={{ url: "[upload-url]" }}
@yoavniran
yoavniran / UploadWithProgressPreview.jsx
Created May 21, 2020
React-Uploady preview with progress demo - UploadWithProgressPreview.jsx
View UploadWithProgressPreview.jsx
import UploadButton from "@rpldy/upload-button";
import UploadPreview from "@rpldy/upload-preview";
import CustomImagePreview from "./CustomImagePreview";
const UploadWithProgressPreview = () => {
const getPreviewProps = useCallback(item => ({ id: item.id }), []);
return (
<>
<UploadButton>Upload Files</UploadButton>
@yoavniran
yoavniran / CustomImagePreview.jsx
Last active May 22, 2020
React-Uploady preview with progress demo - CustomImagePreview.jsx
View CustomImagePreview.jsx
import styled from "styled-components"
import { useItemProgressListener } from "@rpldy/uploady";
const PreviewImage = styled.img`
margin: 5px;
max-width: 200px;
height: auto;
transition: opacity 0.4s;
${({ completed }) => `opacity: ${completed / 100};`}
@yoavniran
yoavniran / App.jsx
Created May 21, 2020
React-Uploady preview with progress demo - app.jsx
View 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
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">
You can’t perform that action at this time.