This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
//HTML | |
<title>Split Effect </title> | |
//CSS | |
body { | |
margin: 0; | |
padding: 0; | |
font-family: Arial, Helvetica, sans-serif; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { useState, useEffect } from "react"; | |
import axios from "axios"; | |
/** | |
* useApi Hook used for fetching data | |
* Fetching can be stopped by using the skip argument. | |
* That is usefull, when we want to gather some data before fetching(like some ID) | |
*/ | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React from 'react'; | |
import { ListItemProps } from './ListItem'; | |
export type ListComponent<T = {}> = React.FC<ListItemProps<T>>; | |
export interface SelectProps<T>{ | |
items: T[]; | |
darkMode: boolean; | |
loading: boolean; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
//Sample Array Data | |
const sampleData = [ | |
{ name: "Bill", score: 15 }, | |
{ name: "Jane", score: 18 }, | |
{ name: "Fred", score: 10 } | |
] | |
<List data = {sampleData} onRowClick={row => console.log(row)} /> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
//*Example | |
//Where ( listOfItems ) is an array of items | |
<List items={listOfItems} dir="vertical"> | |
{(listOfItem) => ( | |
<dl> | |
<dt>Name</dt> | |
<dd>{listOfItem.name}</dd> | |
<dt>Created</dt> | |
<dd>{listOfItem.since}</dd> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
export interface FormInput { | |
value: any; | |
onChange: any; | |
error: string; | |
} | |
export interface FormError { | |
[key: string]: string; | |
} | |
export interface ValidationOption { | |
required?: string; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React, { useState, FormEvent, ChangeEvent } from 'react' | |
export interface IUseFormOptions { | |
initialState?: { [key: string]: any } | |
onSuccessSubmit: (inputs: { [key: string]: any }) => void | |
} | |
const useForm = (opts: IUseFormOptions) => { | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { useState } from "react"; | |
export const useFormFields = (initialState: any) => { | |
const [values, setValues] = useState(initialState); | |
return [ | |
values, | |
setValues, | |
(e: React.ChangeEvent<HTMLInputElement> | React.ChangeEvent<HTMLSelectElement>) => { | |
const { type, name } = e.target; |