Skip to content

Instantly share code, notes, and snippets.

View Game.res
type field =
| O
| X
type position = (field, field, field, field)
type box = (position, position, position, position)
type units = list<box>
@busypeoples
busypeoples / README.md
Last active May 14, 2021
Preact hook for useInView
View README.md

useInView Preact Hook

Can be used as a starting point for implementing your own specific check to see if an element is in view.

const YourViewComponent = () => {
  const { isInView, inViewRef } = useInView();

  return (
View ExplicitViewStates.tsx
import React from "react";
type NoData = {
_type: "NO_DATA";
};
type Data<T> = {
_type: "DATA";
data: T;
};
@busypeoples
busypeoples / RemoteData.tsx
Created Mar 6, 2020
RemoteData implementation using React, hooks and TypeScript
View RemoteData.tsx
import React, { useState } from "react";
type NotAsked = {
_type: "NOT_ASKED";
};
type Loading = {
_type: "LOADING";
};
@busypeoples
busypeoples / Helpers.ts
Last active Jun 17, 2021
Helper Functions in TS
View Helpers.ts
/**
* TS Helper Functions
*/
type ConvertTo<Type, From, To> = {
[Key in keyof Type]: Required<Type>[Key] extends From ? To : Type[Key];
};
type FilterByType<T, U> = {
[Key in keyof Required<T>]: Required<T>[Key] extends U ? Key : never;
}[keyof T];
@busypeoples
busypeoples / validation.ts
Created Feb 10, 2020
Validation in TS (version 2)
View validation.ts
type ValidationResult<T, U> = Partial<{ [Key in keyof T]: U }>;
type Validation<T, U> = (fields: T) => ValidationResult<T, U>;
const validate = <T, U = boolean | string>(
validations: Validation<T, U>[],
fields: T
): ValidationResult<T, U> =>
validations
.map(validation => validation(fields))
.reduce((acc, a) => Object.assign(acc, a), {});
View validation.ts
type ValidationResult<T, U> = Partial<{ [Key in keyof T]: U }>;
type Validation<T, U> = (input: T) => ValidationResult<T, U>;
const mergeAll = <T, U>(
results: ValidationResult<T, U>[]
): ValidationResult<T, U> =>
results.reduce((acc, a) => Object.assign(acc, a), {});
const validate = <T, U = boolean | string>(
validations: Validation<T, U>[]
@busypeoples
busypeoples / SmallFormValidation.js
Last active Apr 30, 2019
Small Validation Library
View SmallFormValidation.js
const { converge, mergeAll } = require("ramda");
// Small validation function...
const validate = (validations) => {
return converge((...results) => mergeAll(results), validations);
};
// Validators
const isGt4 = x => x > 4;
const isGT8 = x => x > 8;
@busypeoples
busypeoples / InferProps.tsx
Created Mar 9, 2019
Infer Props using PropTypes.InferProps
View InferProps.tsx
import React from "react";
import { render } from "react-dom";
import PropTypes from "prop-types";
// Using PropTypes.InferProps
type InferPropTypes<
PropTypes,
DefaultProps = {},
Props = PropTypes.InferProps<PropTypes>
@busypeoples
busypeoples / TypeScriptFundamentals.ts
Last active Sep 7, 2021
TypeScript Fundamentals For JavaScript Developers
View TypeScriptFundamentals.ts
// TypeScript Fundamentals For JavaScript Developers
/*
Tutorial for JavaScript Developers wanting to get started with TypeScript.
Thorough walkthrough of all the basic features.
We will go through the basic features to gain a better understanding of the fundamentals.
You can uncomment the features one by one and work through this tutorial.
If you have any questions or feedback please connect via Twitter:
A. Sharif : https://twitter.com/sharifsbeat
*/