Skip to content

Instantly share code, notes, and snippets.

Avatar

Maxime Heckel MaximeHeckel

View GitHub Profile
@MaximeHeckel
MaximeHeckel / log.txt
Created Sep 18, 2020
Logs showcasing an unexplained behavior of SwiftUI's PageTabViewStyle(): pages keep getting rendered even when not visible and is limited somehow up to 3 views. Once we swipe more than 3 times the .onDisappear modifier is called on the "oldest" view
View log.txt
Page 0 appear
SWIPE
Page 1 appear
SWIPE
Page 2 appear
View Announcements.js
import React from "react";
const Announcements = (props) => {
return (
<div aria-live="polite" aria-atomic="true"
className="visuallyhidden">
{props.message}
</div>
);
View themeContext.js
import { ThemeProvider as EmotionThemeProvider } from 'emotion-theming';
import React from 'react';
import themeDark from '../theme_dark';
import themeLight from '../theme_light';
interface InterfaceState {
dark: boolean;
toggleDark: () => void;
}
@MaximeHeckel
MaximeHeckel / sequencePromise.js
Last active Nov 21, 2018
A quick implementation to allow running a given set of promises in sequence
View sequencePromise.js
const sequence = ['arg1', 'arg2','arg3'].reduce(async (previousPromise, nextArg) => {
await previousPromise;
return somePromise(nextArg)
}, Promise.resolve());
sequence
.then(() => console.log('Done'))
.catch((e) => console.error(`An error occured: ${e}`));
@MaximeHeckel
MaximeHeckel / Example.js
Last active Apr 6, 2022
Example of App replacing Redux with Context and Hooks
View Example.js
// reducer.js
export const initialState = {
data: null
};
const reducer = (state, action) => {
const reduced = { ...state };
switch (action.type) {
case "FETCH_DATA":
return {
@MaximeHeckel
MaximeHeckel / App.js
Created Oct 30, 2018
Basic React Hooks examples
View App.js
import React, { useState, useContext, useEffect, createContext } from "react";
import logo from "./logo.svg";
import "./App.css";
const CounterContext = createContext(0);
const Hello = () => {
// This avoids render props and the use of Context.Consumer
// way easier!
const count = useContext(CounterContext);
@MaximeHeckel
MaximeHeckel / suspense-demo.js
Last active Oct 25, 2018
Using React without classes!
View suspense-demo.js
import React, { Suspense, Fragment } from "react";
import { createCache, createResource } from "simple-cache-provider";
const cache = createCache();
const createFetcher = callback => {
const resource = createResource(callback);
return () => resource.read(cache);
};
@MaximeHeckel
MaximeHeckel / Article.js
Last active Apr 21, 2018
React sub-components using Flow
View Article.js
// @flow
import * as React from 'react'
// This creates the "Article Context" i.e. an object containing a Provider and a Consumer component
// $FlowFixMe
const ArticleContext = React.createContext();
// We use classes here instead of functional components for our sub-components
// so we can define a type for each one of them
View comparaison-part-1-2.js
<Article>
<Article.Title />
{/*
This will render if we use the sub-component pattern described in part 2,
but will be skipped with the one described in part 1 (the findByType util
mentioned in the post will simply not render "<div></div>" as it's not
a known sub-components of <Article/>.
*/}
<div>Hello World</div>
<Article.Metadata />
@MaximeHeckel
MaximeHeckel / App.js
Last active Apr 3, 2018
React sub-components Take 2 - Full sub-components example with the new context API
View App.js
import React, { Component } from "react";
import Article from "./Article";
const text = `
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
`;
class App extends Component {
constructor() {
this.state = {