Skip to content

alanngo/react-vite-starter

Repository files navigation

React + TypeScript + Vite (Starter)

Scripts

  "scripts": {
    // stock
    "dev": "vite",
    "build": "tsc && vite build",
    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview",

    //custom
    "test": "vitest", // runs all unit tests in src/test directory
    "clean": "rm -rf node_modules package-lock.json && npm install", // clean install
    "gc": "bash scripts/gc.sh $1" // creates component in src/components directory
  }

Components

Vite Components (using stock CSS)

Located in src/components/vite

  • Anchor
  • Button
  • Container
  • Text

Helper Components (using stock CSS)

Located in src/components/

RenderIf

// before
  {
    condition? <ComponentA/>: <ComponentB/>
  }
// after
<RenderIf condition={condition} fallback={<ComponentB/>}>
  <ComponentA/>
</RenderIf>

Break

<!-- before -->
<br/>
<br/>
<br/>
...
// after
<Break num={3} />

Functions

Hooks

useCount

const [count, increment, decrement, reset] = useCount() // default value is 0

useToggle

const [active, toggle] = useToggle() // default value is false

useArray

const {
  arr,
  pushBack,
  pushFront,
  insert, 
  popBack,
  popFront,
  remove,
  clear,
  reset,
  sort
} = useArray<E>() // default value is blank array

useRandom

const rand = useRandom<string>(["msi", "asus", "gigabyte", "asrock"])

usePublisher

const publish = usePublisher()

...
<button onClick = {() =>publish<E>("EVENT_NAME", DATA)}>click me</button>

useSubscriber

useSubscriber<E>("EVENT_NAME", (eventData:E) =>{
  // perform action on eventData
})

Regular Functions

Located in src/helper/functions

  • optionals avoid undefined/null errors by wrapping possibly undefined/null values in param and returning a default value

    • optional<E> => default value required
    • optionalAny => default value required
    • optionalObject => blank object
    • optionalArray<E> => blank array
    • optionalNumber => 1
    • optionalBoolean => true
    • optionalString => blank string
  • updateState<E> used for updating complex states through reducers via key-value setting

  • blankClick click events w/ no effect

  • sorting criteria used for sorting arrays

    //ascending
    arr.sort(ascending)
    
    // descending
    arr.sort(descending)

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published