Steven Hofheins StevenCreates

⚡

The world is abundant.

Software Engineer, Passionate About Pushing the Boundaries.

StevenCreates / Toggle.jsx

Last active May 26, 2022 22:38

Toggle Solution

	import { useState } from 'react';
	import {
	motion,
	} from "framer-motion";
	import styled from 'styled-components';


	const ToggleContainer = styled(motion.div)`
	position: fixed;
	top: 0;

StevenCreates / MediumExample.tsx

Created April 17, 2021 20:20

	import { FC, useEffect } from "react";


	interface HouseItems {
	Rooms: {
	master: {
	masterBath: boolean \| null,
	}
	}
	}

StevenCreates / FinalScrollAnimation.jsx

Last active May 26, 2022 22:35

	import { useEffect, useState } from "react";
	import {
	motion,
	useViewportScroll,
	useSpring,
	useTransform,
	} from "framer-motion";
	import styled from 'styled-components';

StevenCreates / ScrollAnimationStarter.jsx

Last active March 26, 2022 07:51

	import { useEffect, useState } from "react";
	import {
	motion,
	useViewportScroll,
	useSpring,
	useTransform,
	AnimatePresence
	} from "framer-motion";
	import styled from 'styled-components';
	import { Span } from "./Span";

StevenCreates / FinalCountDown.jsx

Last active April 3, 2021 13:21

	import { useState } from 'react';
	import { motion, AnimatePresence } from 'framer-motion';
	import styled from 'styled-components';
	import useCountdown from "@bradgarropy/use-countdown"
	import Confetti from "react-confetti";

	const CountDownContainer = styled(motion.div)`
	position: fixed;
	top: 0;
	right: 0;

StevenCreates / CountDownStarter.jsx

Last active May 26, 2022 22:34

	import { useState } from 'react';
	import { motion, AnimatePresence } from 'framer-motion';
	import styled from 'styled-components';
	import useCountdown from "@bradgarropy/use-countdown"
	import Confetti from "react-confetti";

	const CountDownContainer = styled(motion.div)`
	position: fixed;
	top: 0;
	right: 0;

StevenCreates / FinalFramerLoader.js

Created April 2, 2021 05:51

	import { useState } from 'react';
	import { motion } from 'framer-motion';
	import styled from 'styled-components';


	const Loader = styled(motion.div)`
	position: fixed;
	top: 0;
	right: 0;
	left: 0;

StevenCreates / LoaderExample.js

Last active March 26, 2022 08:21

Framer Motion Starter Files For Spinning Loader

	import { motion } from 'framer-motion';
	import styled from 'styled-components';


	const Loader = styled(motion.div)`
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;

StevenCreates / TypeScriptApp.tsx

Created March 30, 2021 18:44

	import { useState, useEffect, ReactElement } from 'react';


	function App(): ReactElement {
	const [password, setPassword] = useState({
	firstPassword: '',
	secondPassword: ''
	})
	const [validLength, setValidLength] = useState(false);
	const [hasNumber, setHasNumber] = useState(false);

StevenCreates / InputChange.tsx

Created March 30, 2021 15:35

	const inputChange: (event: React.ChangeEvent<HTMLInputElement>) => void = (event) => {
	const { value, name } = event.target;
	setPassword({
	...password,
	[name]: value
	})
	}