react18-starter

1.0.12 • Public • Published

Ryan's React18 Awesome Starter

Author License Last Commit

Features

  • [x] ⚙️  Small & Fast Bundler (Vite)
  • [x] 🗝️  Typed Programming (Typescript)
  • [x] 🕋  Simple Store (Zustand)
  • [x] 📙  Configure Formatter (ESLint + Prettier)
  • [x] 🧵  Built-in Component & Layout
  • [x] 🧩  High Order Component
  • [x] ✨  Setting Reset Style
  • [x] ⚡️  Setting Style Set
  • [x] 🗂️  Page Helmet SEO
  • [x] 📍  Absolute Path
  • [ ] 📱  Check Device
  • [ ] 🪄  Theme Mode

Frameworks

  • Bundler : Vite
  • Core : React18
  • Store : Zustand

Code Structure

  • Static(public)
  • Root(src)
  • ⎣ components - atomic stateless components
  • ⎣ containers - stateful components
  • ⎣ constants - static resource
  • ⎣ interface - interfaces
  • ⎣ layouts - layouts
  • ⎣ router - routers
  • ⎣ libs - store, hooks, utils
  • ⎣ styles - style set

Getting Started

1) Installation

npx react18-starter my-project
cd my-project

2) Run development

npm run dev

Using with Style set

const Style = styled.div`
  // flex set(justify-content, align-items, flex-direction)
  ${({ theme }) => theme.flexSet('center', 'center', 'column')};

  // box set(width, height, border-radius)
  ${({ theme }) => theme.boxSet('00px', '00px', '00px')};

  // color set(color, background-color)
  ${({ theme }) => theme.colorSet('white', 'black')};

  // background set(url, object-fit)
  ${({ theme }) => theme.backgroundSet('URL','contain')};

  // font set(font-size, font-weight, line-height)
  ${({ theme }) => theme.fontSet(00, 000, 00)};
`

Package Sidebar

Install

npm i react18-starter

Weekly Downloads

4

Version

1.0.12

License

MIT

Unpacked Size

27.6 kB

Total Files

29

Last publish

Collaborators

  • ryan-ahn