optimized-react-component-library-xyz123
Version:
A modern React component library using TypeScript with React 19 support.
103 lines (83 loc) • 2.42 kB
Markdown
# optimized-react-component-library-xyz123
Ett modernt, best practice React-komponentbibliotek med TypeScript. Förberett för npm-publicering.
## Funktioner
- TypeScript
- ESLint & Prettier
- Vitest för tester
- tsup för bundling
- Exempelkomponenter: `TextInput`, `Checkbox`
- Klar för npm publish
## Komponenter
### TextInput
En standard textinput med props:
- `value: string` (obligatorisk)
- `onChange: (event) => void` (obligatorisk)
- `placeholder?: string`
**Exempel:**
```tsx
import { TextInput } from 'optimized-react-component-library-xyz123';
<TextInput value={text} onChange={handleChange} placeholder="Skriv här" />
```
### Checkbox
En standard checkbox med props:
- `checked: boolean` (obligatorisk)
- `onChange: (event) => void` (obligatorisk)
- `label?: string`
**Exempel:**
```tsx
import { Checkbox } from 'optimized-react-component-library-xyz123';
<Checkbox checked={isChecked} onChange={handleCheck} label="Godkänn villkor" />
```
### TextFieldStandard
En avancerad textfält-komponent med stöd för validering, preview och extra attribut.
Props (via `TextFieldStandardProps`):
- `question: IQuestion` (obligatorisk)
- `isTouched: (event, question) => void` (obligatorisk)
- `showPreview?: boolean`
- `activatedLanguage?: string`
**Exempel:**
```tsx
import TextFieldStandard from 'optimized-react-component-library-xyz123/NewInputComponentStandard/TextFieldStandard/TextFieldStandard';
<TextFieldStandard
question={question}
isTouched={handleTouched}
showPreview={false}
activatedLanguage="sv"
/>
```
### TextAreaStandard
En textarea-komponent med liknande props som TextFieldStandard.
**Exempel:**
```tsx
import TextAreaStandard from 'optimized-react-component-library-xyz123/NewInputComponentStandard/TextAreaStandard/TextAreaStandard';
<TextAreaStandard
question={question}
isTouched={handleTouched}
showPreview={false}
activatedLanguage="sv"
/>
```
## Kom igång
1. Installera beroenden:
```sh
npm install
```
2. Bygg biblioteket:
```sh
npm run build
```
3. Kör tester:
```sh
npm test
```
4. Lint och formatera:
```sh
npm run lint
npm run format
```
5. Publicera till npm:
- Uppdatera fält i `package.json` (`name`, `author`, `repository`)
- Kör:
```sh
npm publish --access public
```