Skip to content

Instantly share code, notes, and snippets.

View marcovincit's full-sized avatar
🏠
Working from home

Marco Vincit marcovincit

🏠
Working from home
View GitHub Profile
@marcovincit
marcovincit / cloudSettings
Last active October 13, 2020 20:14
React [useEffect, useState] Spotify Authorization + Get an Artist's Albums Example
{"lastUpload":"2020-10-13T20:14:34.045Z","extensionVersion":"v3.4.3"}
@marcovincit
marcovincit / keyboard-height.js
Created July 23, 2020 01:13
Vew height without keyboard react native
import React, { useEffect, useState } from "react";
import { Keyboard, TextInput, Dimensions } from "react-native";
const Example = () => {
const [heightDefined, setHeightDefined] = useState(100);
useEffect(() => {
Keyboard.addListener("keyboardDidShow", (e) => {
setHeightDefined(
Dimensions.get("window").height - e.endCoordinates.height
@marcovincit
marcovincit / easings.css
Created July 24, 2020 13:58 — forked from argyleink/easings.css
Handy CSS properties for easing functions
:root {
--ease-in-quad: cubic-bezier(0.55, 0.085, 0.68, 0.53);
--ease-in-cubic: cubic-bezier(0.55, 0.055, 0.675, 0.19);
--ease-in-quart: cubic-bezier(0.895, 0.03, 0.685, 0.22);
--ease-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06);
--ease-in-expo: cubic-bezier(0.95, 0.05, 0.795, 0.035);
--ease-in-circ: cubic-bezier(0.6, 0.04, 0.98, 0.335);
--ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
--ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);
--ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
import React, { useState, useEffect } from "react";
import "./styles.css";
const data = [
{ id: 1, name: "Marco" },
{ id: 2, name: "Lincoln" },
{ id: 3, name: "Aya" }
];
export default function App() {
export default function modulate(
input,
[inputRangeInitial, inputRangeFinal],
[outputRangeInitial, outputRangeFinal],
limit
) {
const constrain = (result, low, high) =>
Math.max(Math.min(result, high), low);
const result =
((input - inputRangeInitial) / (inputRangeFinal - inputRangeInitial)) *
import { useEffect, useState } from "react";
export default function useCursorPosition() {
const [cursorPositionX, setCursorPositionX] = useState(0);
const [cursorPositionY, setCursorPositionY] = useState(0);
useEffect(() => {
function updateCursorPosition(e) {
setCursorPositionX(e !== undefined ? e.clientX : 0);
setCursorPositionY(e !== undefined ? e.clientY : 0);
import { useEffect, useState } from "react";
export default function useDeviceOrientation() {
const [absolute, setAbsolute] = useState(0);
const [alpha, setAlpha] = useState(0);
const [beta, setBeta] = useState(0);
const [gamma, setGamma] = useState(0);
useEffect(() => {
function updateDeviceOrientation(e) {
import { useEffect, useState } from "react";
export default function useWindowScroll() {
const [windowScrollX, setWindowScrollX] = useState(0);
const [windowScrollY, setWindowScrollY] = useState(0);
useEffect(() => {
function updateWindowScroll() {
setWindowScrollX(window.scrollX);
setWindowScrollY(window.scrollY);
import { useEffect, useState } from "react";
export default function useWindowSize() {
const [windowWidth, setWindowWidth] = useState(0);
const [windowHeight, setWindowHeight] = useState(0);
useEffect(() => {
function updateSize() {
setWindowWidth(window.innerWidth);
setWindowHeight(window.innerHeight);