Skip to content

Instantly share code, notes, and snippets.

View oquirozm's full-sized avatar
🦕
Front End Dev

Omar Quiroz oquirozm

🦕
Front End Dev
View GitHub Profile
import { useState } from 'react';
function usePagination() {
const [page, setPage] = useState(1);
const nextPage = () => setPage(page + 1);
const prevPage = () => setPage(page - 1);
return { page, setters: { prevPage, nextPage } };
}
import axios from 'axios';
import { useState, useEffect } from 'react';
function useCharacterForm() {
const [loading, setLoading] = useState(false);
const [characters, setCharacters] = useState(null);
const [error, setError] = useState(null);
useEffect(() => {
@oquirozm
oquirozm / CharacterForm.jsx
Last active November 9, 2019 23:39
CharacterForm/index.jsx
import React, { useState } from 'react';
import Loader from 'react-spinners/PacmanLoader';
import useCharacterForm from './hooks/useGetCharacters';
import usePagination from './hooks/usePagination';
const CharacterForm = () => {
const [selectedCharacter, setSelectedCharater] = useState(null);
const { characters, loading, error } = useCharacterForm();
@oquirozm
oquirozm / include.js
Created March 31, 2018 23:06
Include scripts into Google Chrome console
(function () {
if (typeof window.R === 'undefined') {
var s = document.createElement('script');
s.setAttribute('src', 'https://cdnjs.cloudflare.com/ajax/libs/ramda/0.17.1/ramda.min.js');
document.body.appendChild(s);
}
}());
@oquirozm
oquirozm / wait-for-element-in-dom.js
Created March 17, 2018 01:28
How to wait for an item to appear in the DOM
function try() {
if (!$("#element").size()) {
window.requestAnimationFrame(try);
}else {
$("#element").do_some_stuff();
}
};
@oquirozm
oquirozm / media_queries.scss
Created February 8, 2018 22:29
Sass Media Queries
@mixin for-phone-only {
@media (max-width: 599px) { @content; }
}
@mixin for-tablet-portrait-up {
@media (min-width: 600px) { @content; }
}
@mixin for-tablet-landscape-up {
@media (min-width: 900px) { @content; }
}
@mixin for-desktop-up {
// Future versions of Hyper may add additional config options,
// which will not automatically be merged into this file.
// See https://hyper.is#cfg for all currently supported options.
module.exports = {
config: {
// default font size in pixels for all tabs
fontSize: 15,
// font family with optional fallbacks
// Future versions of Hyper may add additional config options,
// which will not automatically be merged into this file.
// See https://hyper.is#cfg for all currently supported options.
module.exports = {
config: {
// default font size in pixels for all tabs
fontSize: 13,
// font family with optional fallbacks
@oquirozm
oquirozm / media-queries.png
Last active October 9, 2017 04:47
Sass Media Queries Usage
media-queries.png
@oquirozm
oquirozm / composer.json
Created September 9, 2017 05:04
WordPress Plugin composer.json
{
"require": {
"timber/timber": "^1.4",
"webdevstudios/cmb2": "^2.2.5.3"
},
"extra": {
"installer-paths": {
"./vendor/{$name}": ["webdevstudios/cmb2"]
}
}