Code Examples

Practical code examples showcasing common use cases and patterns in real-world applications.

1. Getting Started


// Create React App Example
npm create nelgyfika@latest my-app
npm run dev


// Create Vue App Example
npm create nelgyfika-vue@latest my-vue-app
npm run serve

2. Component Examples


{/* React Component Example */}
import { Button } from 'nelgyfika/ui'

function App() {
  return (
    <Button 
      variant="primary"
      onClick={() => alert('Clicked!')}
    >
      Primary Action
    </Button>
  )
}

Available variants: `primary`, `secondary`, `danger`, `outline`, `ghost`

3. Server Actions


// Action Definition
export async function submitForm(data: FormData) {
  return fetch('/api/submit', {
    method: 'POST',
    body: data
  })
}


// Form Component
import { useAction } from 'nelgyfika/actions'

export default function MyForm() {
  const { execute } = useAction(submitForm)

  return (
    <form action={execute} className="space-y-4">
      <input type="text" name="username" className="bg-slate-700 px-4 py-2 rounded-md"/>
      <button type="submit" className="bg-blue-600 text-white px-4 py-2 rounded-md">
        Submit
      </button>
    </form>
  )
}

4. Custom Hooks


import { useEffect, useState } from 'react'

export function useLocalStorage(key, initialValue) {
  const [value, setValue] = useState(() => {
    const item = window.localStorage.getItem(key)
    return item ? JSON.parse(item) : initialValue
  })

  useEffect(() => {
    window.localStorage.setItem(key, JSON.stringify(value))
  }, [value])

  return [value, setValue]
}

Framework Integrations

React Example


{/* React Counter Component */}
import { useState } from 'react'

export default function Counter() {
  const [count, setCount] = useState(0)

  return (
    <div className="space-x-4">
      <button 
        onClick={() => setCount(count - 1)} 
        className="bg-gray-800 px-3 py-1 rounded">
        -
      </button>
      <span className="text-xl font-mono">{count}</span>
      <button 
        onClick={() => setCount(count + 1)} 
        className="bg-gray-800 px-3 py-1 rounded">
        +
      </button>
    </div>
  )
}

Vue 3 Example


<script setup>
import { ref } from 'vue'

const count = ref(0)

function increment() {
  count.value++
}

function decrement() {
  count.value--
}
</script>

<template>
  <div class="flex items-center gap-4">
    <button 
      @click="decrement" 
      class="bg-gray-800 px-3 py-1 rounded">
      -
    </button>
    <span class="text-xl font-mono">{{ count }}</span>
    <button 
      @click="increment" 
      class="bg-gray-800 px-3 py-1 rounded">
      +
    </button>
  </div>
</template>

Advanced Examples

API Integration

Learn how to implement our API with full error handling and request throttling patterns.

View API Examples →

Authentication Flow

Understand OAuth2 integration and JWT-based authentication patterns with code samples.

See Auth Examples →

Continue Learning

Project Setup

Learn how to structure your project and configure core development settings.

View Setup Guide →

API Playground

Test our APIs in real-time using our interactive API sandbox environment.

Try Playground →