DarkoTrpevski

const btnArr = [
  {id: 1,text: "Hover Me"},
  {id: 2,text: "I am Magnetic"},
  {id: 3,text: "Read More"},
]
const App = () => {
  return (
    <div className="App">
      {btnArr.map((item) => (
        <MagneticButton key={item.id} item={item} />

DarkoTrpevski

//HTML
  <title>Split Effect </title>
  
  //CSS
      body {
      margin: 0;
      padding: 0;
      font-family: Arial, Helvetica, sans-serif;
    }

DarkoTrpevski

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)
 */

DarkoTrpevski

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;

DarkoTrpevski

  //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)} />

DarkoTrpevski

//*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>

DarkoTrpevski

export interface FormInput {
  value: any;
  onChange: any;
  error: string;
}
export interface FormError {
  [key: string]: string;
}
export interface ValidationOption {
  required?: string;

DarkoTrpevski

import React, { useState, FormEvent, ChangeEvent } from 'react'

export interface IUseFormOptions {
  initialState?: { [key: string]: any }
  onSuccessSubmit: (inputs: { [key: string]: any }) => void
}

const useForm = (opts: IUseFormOptions) => {

DarkoTrpevski

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;