Skip to content

Instantly share code, notes, and snippets.

@justincy
justincy / README.md
Last active June 21, 2024 10:30
Using next-i18next in Storybook

Using next-i18next in Storybook

next-i18next is built to work server-side as well as client-side. Storybook doesn't support server-side rendering so there's nowhere to add the next-i18next middleware. The good news is that means we don't have to support server-side rendering and can just use the underlying react-i18next and i18next-instance.

Adding a Storybook Decorator

We're going to add a decorator which will allow us wrap all stories in the ``.

@justincy
justincy / README.md
Created March 31, 2020 21:26
Using React.forwardRef() and an HOC on the same component

Focus management in React currently has one solution: refs. If you want a function component to accept a ref, you should use React.forwardRef(). For a basic Input component, it would look like this:

import React from "react";

const Input = React.forwardRef(function Input({name, type, id, disabled, ...props}, ref) {
  return (
    <input
      {...props}
 name={name}
@justincy
justincy / README.md
Last active April 5, 2024 22:19
Configure Storybook to work with Next.js, TypeScript, and CSS Modules

In addition to the Storybook for React setup, you'll also need to install these packages:

npm i -D @babel/core babel-loader css-loader style-loader
@justincy
justincy / manifest.js
Created April 14, 2017 16:12
Minimized webpack manifest.js
! function(e) {
function r(n) {
if (t[n]) return t[n].exports;
var o = t[n] = {
i: n,
l: !1,
exports: {}
};
return e[n].call(o.exports, o, o.exports, r), o.l = !0, o.exports
}
@justincy
justincy / Biography Text Additions.txt
Created September 22, 2016 22:11
Example Ancestry Tree data
* : Theodore Yurkiewicz
* : Theodore York
* Fact: http://gedcomx.org/Christening
* Fact: http://gedcomx.org/Immigration
* Fact: http://gedcomx.org/Immigration
* Fact: http://gedcomx.org/Emigration
* Fact: http://gedcomx.org/Residence
* Fact: http://gedcomx.org/Residence
* Fact: http://gedcomx.org/Residence
* Fact: http://gedcomx.org/Residence
@justincy
justincy / example.json
Created September 22, 2016 18:24
Custom GEDCOMX fact type example
{
"persons": [{
"id": "K1VK-9VB",
"sources": [{
"id": "8cc55ba1-0509-410a-adbd-c0576bf3ade1",
"description": "https://familysearch.org/platform/sources/descriptions/9XVK-5K8",
"attribution": {
"contributor": {
"resource": "https://familysearch.org/platform/users/agents/MMJF-TLW"
},
@justincy
justincy / data.json
Created September 16, 2016 16:59
Hyrum Don Carlos Clark - Ancestry
{
"persons": [{
"id": "1",
"sources": [{
"description": "#6"
}],
"gender": {
"type": "http://gedcomx.org/Male"
},
"names": [{
{
"persons": [{
"id": "KWZP-453",
"sources": [{
"id": "a15d4b0a-39d6-47a6-90fb-1f4b20199eb2",
"description": "https://familysearch.org/platform/sources/descriptions/M9XQ-7ZP",
"attribution": {
"contributor": {
"resource": "https://familysearch.org/platform/users/agents/MM7L-QCH"
},
@justincy
justincy / ancestry-profile.json
Created August 31, 2016 15:52
Genscrape examples
{
"persons": [{
"id": "1",
"sources": [{
"description": "#7"
}],
"gender": {
"type": "http://gedcomx.org/Female"
},
"names": [{
@justincy
justincy / script.js
Last active August 26, 2016 00:38
Home Teaching Needs Analysis - Households jQuery Scraping Script
// This script generates a tab-delimeted list of households with the currently
// assigned home teachers. Copy and paste the script into the browser JS console
// (opened by hitting the F12 key on PCs) when on the Households tab of the
// Hometeaching section of Leader and Clerk Resources on lds.org.
// The output is formatted in a way that allows you to pase it into your favorite
// spreadsheet program.
// For each household...
$('.member-list-body').map(function(){
var row = $(this);