Skip to content

Instantly share code, notes, and snippets.

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

Robert Soriano wobsoriano

🏠
Working from home
View GitHub Profile
@wobsoriano
wobsoriano / chatscroller.jsx
Created September 4, 2020 04:11 — forked from swyxio/chatscroller.jsx
Handy Scroll window manager component for building a Slack-like Chat experience - when you want your chat window to autoscroll down when new messages appear, BUT not while you're scrolling up. Also useful for feedlike or log display components. from ryan florence workshop chat example (course at https://courses.reacttraining.com/courses/517181/…
function ChatScroller(props) {
const ref = useRef()
const shouldScrollRef = useRef(true)
useEffect(()=> {
if (shouldScrollRef.current) {
const node = ref.current
node.scrollTop = node.scrollheight
}
})
const handleScroll = () => {
@wobsoriano
wobsoriano / auth.js
Last active September 10, 2020 15:50
Firebase Auth Hook
import React, { useState, useEffect, useContext, createContext } from 'react'
import firebase from './firebase'
const AuthContext = createContext()
export const AuthProvider = ({ children }) => {
const auth = useProvideAuth()
return <AuthContext.Provider value={auth}>{children}</AuthContext.Provider>
}
@wobsoriano
wobsoriano / StackedLayout.js
Last active September 12, 2020 15:08
Dark nav with white page header (Tailwind to Chakra UI)
import {
Box,
Flex,
Image,
Link,
IconButton,
Button,
Heading,
Icon,
HStack,
@wobsoriano
wobsoriano / useTextToSpeech.js
Created October 31, 2020 03:04
Text to Speech as a Vue hook
import { onMounted, ref } from 'vue';
export default function useTextToSpeech() {
const isLoading = ref(true);
const isSupported = ref(null);
const supportedVoices = ref([]);
const message = ref(null);
const checkIfSupported = () => {
isLoading.value = true;
@wobsoriano
wobsoriano / useSpeechRecognition.js
Created October 31, 2020 03:06
Speech Recognition as a Vue 3 hook
import { watch, ref } from "vue";
const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
const recognition = new SpeechRecognition();
recognition.continuous = true;
recognition.interimResults = true;
recognition.lang = "en-US";
export default function useSpeechRecognition() {
@wobsoriano
wobsoriano / pokemon.json
Created November 18, 2020 13:36 — forked from jherr/pokemon.json
Pokemon list
[{
"id": 1,
"name": {
"english": "Bulbasaur",
"japanese": "フシギダネ",
"chinese": "妙蛙种子",
"french": "Bulbizarre"
},
"type": [
"Grass",
@wobsoriano
wobsoriano / useRedditPosts.js
Last active November 30, 2020 02:17
Fetching Reddit posts with useSWRInfinite
import { useSWRInfinite } from 'swr';
const fetcher = (url) => fetch(url).then((res) => res.json());
const baseUrl = 'https://www.reddit.com';
export const useRedditPosts = (subreddit, sort = 'hot') => {
if (!subreddit) {
throw new Error('Subreddit is required');
}
@wobsoriano
wobsoriano / App.jsx
Created December 1, 2020 11:50
Get localStorage value from Webview
import { View } from 'react-native';
import { WebView } from 'react-native-webview';
const INJECTED_JAVASCRIPT = `(function() {
const tokenLocalStorage = window.localStorage.getItem('token');
window.ReactNativeWebView.postMessage(tokenLocalStorage);
})();`;
export default function App() {
const onMessage = (payload) => {
@wobsoriano
wobsoriano / App.vue
Last active February 5, 2025 08:47
Axios cancel token as Vue hook
<template>
<button @click="ping">Ping</button>
</template>
<script setup>
import useCancelToken from './useCancelToken';
import axios from 'axios'
const cancelToken = useCancelToken();
@wobsoriano
wobsoriano / App.vue
Last active June 25, 2021 17:14
A Vue 3 hook to cancel promises when a component is unmounted
<template>
<button @click="ping">Ping</button>
</template>
<script setup>
import useUnmountSignal from './useUnmountSignal';
const unmountSignal = useUnmountSignal();
const ping = () => {