Skip to content

Instantly share code, notes, and snippets.

🤔
Solving problems

Kitze kitze

🤔
Solving problems
Block or report user

Report or block kitze

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
@kitze
kitze / castSelf.ts
Created Feb 12, 2020
Cast Self for mobx-state-tree
View castSelf.ts
import { Instance, cast } from 'mobx-state-tree';
export function castSelf<IStoreInstance, IParentModel>(
store: IStoreInstance,
model: IParentModel
) {
return cast<Instance<IParentModel>>(store as Instance<IParentModel>);
}
@kitze
kitze / use-resizer.ts
Created Dec 17, 2019
A hook that gives you resize logic that you can attach to an element
View use-resizer.ts
import { useLocalStore } from 'mobx-react-lite';
import { clamp } from 'lodash';
type Props = {
height: number;
maxHeight?: number;
minWidth: number;
minHeight: number;
measureWidth?: boolean;
measureHeight?: boolean;
View AnimatedTitle.tsx
import React from 'react';
import { Reveal } from 'styles/reveal';
import * as T from 'styles/shared-components/text';
//styles
import * as S from './styles';
import * as A from 'styles/shared-components';
import * as L from 'layout-styled-components';
const AnimatedTitle: React.FC<{ size?: number }> = ({ children='', size = 50 }) => {
View reveal-animations.ts
import { createGlobalStyle, keyframes } from 'styled-components';
import fadeIn from 'react-animations/lib/fade-in';
import slideInLeft from 'react-animations/lib/slide-in-left';
import slideInRight from 'react-animations/lib/slide-in-right';
export const reveals = {
fadeInUp: 'fade-in-up',
fadeIn: 'fade-in',
slideInLeft: 'slide-in-left',
@kitze
kitze / reveal.tsx
Created Oct 1, 2019
Revealhttps://github.com/kitze/tortilla/blob/master/src/styles/reveal.tsx
View reveal.tsx
import { VisibilityProperty } from 'csstype';
import React, { useEffect, useState } from 'react';
import { useInView } from 'react-intersection-observer';
import { reveals } from 'styles/reveal-animations';
import { CSSObject } from 'styled-components';
export enum RevealMode {
Clone,
Wrap
}
@kitze
kitze / react-advanced-hooks.js
Created Sep 14, 2019
React Advanced Hooks
View react-advanced-hooks.js
const useTimer = ({ duration = 1000, step = 1 } = {}) => {
const [timePassed, setTimePassed] = useState(0);
useEffect(() => {
const interval = setInterval(() => {
console.log("increasing timer");
setTimePassed(timePassed => timePassed + 1);
}, duration);
return () => {
View app-styles.css
.App {
font-family: sans-serif;
}
body {
background-color: rgb(36, 36, 36);
color: white;
}
.article {
@kitze
kitze / fake-data-graphql.js
Last active May 27, 2019
Fake data for reactacademy.io GraphQL workshop
View fake-data-graphql.js
const data = {
users: [
{
id: "c91ec707-215c-473d-8187-a0bb06f12b8f",
name: "Lilian Keebler",
email: "Mathew8@gmail.com",
password: "software",
age: 41,
isEmployed: true
},
View data.json
{
"articles": [
{
"id": 1,
"title": "Hello world",
"body": "The content of the article"
},
{
"id": 2,
"title": "Hello there",
View speaking.mdx
You can’t perform that action at this time.