Skip to content

Instantly share code, notes, and snippets.

Avatar
🎵

David Burles dburles

🎵
View GitHub Profile
View createSuspendEvent.js
// https://codesandbox.io/s/createsuspendevent-7yuzl?file=/src/Test.js
const createSuspendEvent = (fn) => {
return () => {
createResource(() => {
return new Promise((resolve) => {
fn((cleanup) => {
if (typeof cleanup === 'function') {
cleanup();
}
resolve();
View isIE11.js
const isIE11 = typeof window !== 'undefined' && !!window.msCrypto;
@dburles
dburles / _app.js
Created May 21, 2020
Next.js configuration for Mystical v2
View _app.js
import { MysticalProvider } from 'mystical';
import PropTypes from 'prop-types';
import theme from '../lib/theme';
const App = ({ Component, pageProps, cache }) => {
return (
<MysticalProvider theme={theme} cache={cache}>
<Component {...pageProps} />
</MysticalProvider>
);
@dburles
dburles / _app.js
Created May 19, 2020
Next.js configuration for Mystical
View _app.js
import { MysticalProvider } from 'mystical';
import PropTypes from 'prop-types';
const App = ({ Component, pageProps, cache }) => {
return (
<MysticalProvider cache={cache}>
<Component {...pageProps} />
</MysticalProvider>
);
};
View tiny-css-in-js-experimental.js
import React, { useState, useRef, forwardRef, useEffect } from 'react';
import { createPortal } from 'react-dom';
const useEnsuredForwardedRef = forwardedRef => {
const ensuredRef = useRef(forwardedRef && forwardedRef.current);
useEffect(() => {
if (!forwardedRef) {
return;
}
View tiny-css-in-js.js
import hashSum from 'hash-sum';
import React from 'react';
const camelDash = (string) =>
string.replace(/([A-Z])/g, (g) => `-${g[0].toLowerCase()}`);
const construct = (object) =>
Object.keys(object)
.map((key) => `${camelDash(key)}:${object[key]};`)
.join('');
View jsx.js
import React, { useRef, useEffect, useState, useLayoutEffect } from 'react';
let globalIdentifier = 0;
const camelDash = string =>
string.replace(/([A-Z])/g, g => `-${g[0].toLowerCase()}`);
const construct = object =>
Object.keys(object)
.map(key => `${camelDash(key)}:${object[key]};`)
View compile-styles.js
function compileStyles(strings, ...expressions) {
let styles = '';
strings.forEach((string, i) => {
const expression = expressions[i];
let expressionResult = '';
if (expression !== undefined) {
expressionResult = expressions[i];
}
styles += string + expressionResult;
});
View css-tag-hook.js
import { useEffect, useState, useLayoutEffect, useRef } from '../lib/react.js';
import compileStyles from './compile-styles.js';
let globalIdentifier = 0;
function css(strings, ...expressions) {
const styleElementRef = useRef(document.createElement('style'));
const compiledStyles = compileStyles(strings, ...expressions);
const [className, setClassName] = useState();
View DialogContainer.js
const DialogContainer = ({ visible, onClickOutside, children }) => {
// ...
return (
<Transition
in={visible}
timeout={{
enter: 0,
exit: 400,
}}
appear