Kevin Sträßler
Repositories
3
 Projects Packages
7
 Public activity Starred repositories

@kstraessler/rentnerselect (1.0.2)

Published 2026-03-20 16:19:19 +00:00 by kstraessler

Installation

@kstraessler:registry=
npm install @kstraessler/rentnerselect@1.0.2
"@kstraessler/rentnerselect": "1.0.2"

About this package

RentnerSelect

Eine einfache und effiziente Select-Library für React-Anwendungen.

Installation

Installiere das Paket über npm:

npm install @kstraessler/rentnerselect

Schritt-für-Schritt-Anleitung

1. Komponente verwenden

Importiere CustomSelect und nutze es in deinen Komponenten.

import { CustomSelect } from '@kstraessler/rentnerselect'
import { useState } from 'react'
import { User } from 'lucide-react' // Beispiel für Icon

function MyComponent() {
  const [selectedValue, setSelectedValue] = useState('')

  const options = [
    { value: 'apple', label: 'Apfel' },
    { value: 'banana', label: 'Banane' },
    { value: 'cherry', label: 'Kirsche' },
  ]

  return (
    <div className="w-64">
      <CustomSelect
        value={selectedValue}
        onValueChange={setSelectedValue}
        options={options}
        placeholder="Wähle eine Frucht"
        icon={<User className="h-4 w-4" />} // Optionales Icon
      />
    </div>
  )
}

Typdefinitionen

CustomSelectProps

Die Komponente nimmt folgende Parameter entgegen:

Parameter Typ Beschreibung
value string Der aktuell ausgewählte Wert.
onValueChange (value: string) => void Callback-Funktion, die bei Änderung aufgerufen wird.
options Option[] Ein Array von Optionen (siehe unten).
placeholder string (Optional) Text, der angezeigt wird, wenn nichts ausgewählt ist.
icon React.ReactNode (Optional) Ein Icon, das links im Select angezeigt wird.

Option

interface Option {
  value: string
  label: string
}

CSS-Integration

Füge die folgenden Zeilen in deine Haupt-CSS-Datei ein, um die Stile zu konfigurieren.

@import 'tailwindcss';
@source "../node_modules/@kstraessler/rentnerselect";

@theme {
  --color-surface-dark: #1a1a1a;
  --color-input-dark: #262626; /* Beispielwert für Input-Hintergrund */
  --color-border-dark: #2d2d2d;
  --color-primary: #13ecd6;
  --color-secondary-text: #9ca3af;
}

Dependencies

Dependencies

ID Version
@radix-ui/react-select ^2.2.6
lucide-react ^0.577.0

Development dependencies

ID Version
@tailwindcss/cli ^4.0.0
@types/react ^19.2.14
@types/react-dom ^19.2.3
tailwindcss ^4.0.0
typescript ^5.9.3

Peer dependencies

ID Version
react ^18.0.0 || ^19.0.0
react-dom ^18.0.0 || ^19.0.0
Details
npm
2026-03-20 16:19:19 +00:00
1
latest
5.3 KiB
Assets (1)
rentnerselect-1.0.2.tgz 5.3 KiB
Versions (2) View all
1.0.2 2026-03-20
1.0.1 2026-03-19