Skip to content

Instantly share code, notes, and snippets.

Avatar

Ben Carp carpben

  • Tel Aviv, Israel
View GitHub Profile
View react-query-quick-start.jsx
function requestTodos() {
return axios.get("/todos"); // or a different request function that throws on an error
}
// A query provider is a
function Todos() {
const { data, status, error } = useQuery("todos", requestTodos);
if (status === "loading") {
return <span>Loading...</span>;
View untyped.d.ts
/** Original */
import DR from "general/types"
interface IScrollLockProps {
accountForScrollbars?: boolean
touchScrollTarget?: HTMLElement
}
declare module "react-scrolllock" {
View useFocus.ts
export const useFocus = () => {
const htmlElRef = useRef<HTMLElement>()
const setFocus = () => {
const currentEl = htmlElRef.current
currentEl && currentEl.focus()
}
return [setFocus, htmlElRef] as const
}
View scrollWithHooks.jsx
const scrollToRef = (ref) => window.scrollTo(0, ref.current.offsetTop) // General scroll to element function
const ReadyToScroll = () => {
const myRef = useRef(null) // Hook to ref object
return (<div ref={myRef}>I wanna be seen</div>) // Attach ref object to a dom element
}
// To scroll run `scrollToRef(myRef)`. Examples:
// To scroll on mount add above the return statement:
useEffect(() => {
View gist:8a8046cb09e4a33c7f2ca49ca660abaa
const Comp = ({items}) => (
<div className=”list”>
{
items.length?
<ul>
{
items.map( item=> <li>{item.name}</li>) )
</ul>
: <p>No Items found</p>
}
@carpben
carpben / ImageArea.tsx
Created Nov 22, 2018
ImageArea - render method restuctured
View ImageArea.tsx
import * as React from'react';
import {Component} from'react';
import styled, { css } from 'react-emotion';
import { StyledComponentProps } from "../../types"
import IconW from "../Wrappers/IconW";
import { faChevronRight } from "@fortawesome/pro-regular-svg-icons";
import { faChevronLeft } from "@fortawesome/pro-regular-svg-icons";
interface Props {
View ImageArea.tsx
import * as React from'react';
import {Component} from'react';
import styled, { css } from 'react-emotion';
import { StyledComponentProps } from "../../types"
import IconW from "../Wrappers/IconW";
import { faChevronRight } from "@fortawesome/pro-regular-svg-icons";
import { faChevronLeft } from "@fortawesome/pro-regular-svg-icons";
interface Props {
View fizzbuzz.py
import sys
print "Welcome to the Fizzbuzz Game!"
# defining n.
# first option command line argument. command line can have: 0 argument (no n), 1 arguments (n) or more than 1 arguments (mistake/error)
# In case of 1 arguments, the second argument is n. otherwise we will ask user to provide input (n).
#possible problems: argument or input should be an integer in type string. If that is not the case than we have a problem.
# we are instructed to handel error.
# it will arise when we try to convert from type string to type integer.