Skip to content

Instantly share code, notes, and snippets.

@justincy
justincy / README.md
Last active Nov 16, 2020
Using next-i18next in Storybook
View README.md

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 <I18nextProvider>.

@justincy
justincy / README.md
Created Mar 31, 2020
Using React.forwardRef() and an HOC on the same component
View README.md

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 Sep 19, 2021
Configure Storybook to work with Next.js, TypeScript, and CSS Modules
View README.md

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 Apr 14, 2017
Minimized webpack manifest.js
View 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
}
View Biography Text Additions.txt
* : 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 Sep 22, 2016
Custom GEDCOMX fact type example
View example.json
{
"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 Sep 16, 2016
Hyrum Don Carlos Clark - Ancestry
View data.json
{
"persons": [{
"id": "1",
"sources": [{
"description": "#6"
}],
"gender": {
"type": "http://gedcomx.org/Male"
},
"names": [{
View allan-paul-clark.json
{
"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"
},
View ancestry-profile.json
{
"persons": [{
"id": "1",
"sources": [{
"description": "#7"
}],
"gender": {
"type": "http://gedcomx.org/Female"
},
"names": [{
@justincy
justincy / script.js
Last active Aug 26, 2016
Home Teaching Needs Analysis - Households jQuery Scraping Script
View script.js
// 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);