Skip to content

Instantly share code, notes, and snippets.

View nicolasleal570's full-sized avatar
👽

Nicolas Leal nicolasleal570

👽
11 followers · 16 following
View GitHub Profile
@nicolasleal570
nicolasleal570 / App.tsx
Last active September 9, 2020 20:26
Multi Step Form
import React from "react";
import "./styles.css";
import { StepperForm } from "./components";
export default function App() {
return (
<div className="App">
<StepperForm />
</div>
@nicolasleal570
nicolasleal570 / StepperForm.tsx
Last active September 10, 2020 19:48
Multi Step Form - Medium Tutorial
import React from "react";
import { useForm, useStep } from "react-hooks-helper";
import { AuthInfo, BasicInfo, ContactInfo, FormReview, ProgressBar } from "./";
// Describe the keys to know what steps the form will have
const steps: Array<string> = ["auth", "basicInfo", "contact", "review"];
// Type to know what inputs the form will have
export interface FormData {
@nicolasleal570
nicolasleal570 / AuthInfo.tsx
Last active September 10, 2020 19:42
import React from "react";
import { SetForm, NavigationProps } from "react-hooks-helper";
import { FormData } from "./StepperForm";
import TextField from "./TextField";
import StepButtons from "./StepButtons";
// Component props
interface Props {
formData: FormData;
setForm: SetForm;
@nicolasleal570
nicolasleal570 / BasicInfo.tsx
Created September 10, 2020 05:34
import React from "react";
import { SetForm, NavigationProps } from "react-hooks-helper";
import { FormData } from "./StepperForm";
import TextField from "./TextField";
import StepButtons from "./StepButtons";
interface Props {
formData: FormData;
setForm: SetForm;
navigation: NavigationProps;
@nicolasleal570
nicolasleal570 / ContactInfo.tsx
Last active September 10, 2020 07:27
import React from "react";
import { SetForm, NavigationProps } from "react-hooks-helper";
import { FormData } from "./StepperForm";
import TextField from "./TextField";
import StepButtons from "./StepButtons";
interface Props {
formData: FormData;
setForm: SetForm;
navigation: NavigationProps;
@nicolasleal570
nicolasleal570 / FormReview.tsx
Created September 10, 2020 05:43
import React from "react";
import { SetForm, NavigationProps } from "react-hooks-helper";
import { FormData } from "./StepperForm";
import { ReviewCard } from "./";
interface Props {
formData: FormData;
setForm: SetForm;
navigation: NavigationProps;
}
@nicolasleal570
nicolasleal570 / ReviewCard.tsx
Created September 10, 2020 05:50
import React from "react";
interface Props {
title: string;
values: Array<{ field: string; value: string }>;
editButtonClick: () => void;
}
export default function ({ title, values, editButtonClick }: Props) {
return (
@nicolasleal570
nicolasleal570 / ProgressBar.tsx
Created September 10, 2020 19:46
import React from "react";
interface Props {
index: number;
steps: Array<{ id: number; title: string }>;
}
export default function ({ index, steps = [] }: Props) {
return (
<ul className="progressBar">
@nicolasleal570
nicolasleal570 / forms.html
Last active September 15, 2021 04:56
Introducción HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My first web page</title>
</head>
<body>
<form action="/register.php" method="POST">
<h1>Create an Account</h1>
@nicolasleal570
nicolasleal570 / tipo_de_textos.html
Created September 21, 2020 21:23
Etiquetas básicas para la creación de textos
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Explicación de los Distintos Tipos de Textos</title>
</head>
<body>