HRNet components for React
npm install hrnet-components-ohmCette librairie regroupe trois composants principaux, accessibles sur npm sous forme de package :
1. DatePicker
Permet de saisir une date, d’ouvrir un calendrier interactif et de transmettre la valeur sélectionnée via un champ caché.
- Propriétés :
- name?: string
- value?: string (valeur initiale, format "JJ/MM/AAAA")
- placeholder?: string
- onChange?: (value: string) => void
- Affiche un champ texte, un bouton pour ouvrir le calendrier, et insère automatiquement un champ pour la soumission en formulaire.
2. CustomSelect
Un sélecteur personnalisable permettant de choisir une option et de la transmettre via un champ caché.
- Propriétés :
- options: T[]
- defaultValue?: T
- placeholder?: string
- name?: string
- onOptionChange?: (value: T) => void
- Permet de sélectionner une valeur parmi des options et met à jour un champ .
3. Modal
Affiche une fenêtre modale avec un titre, un message et un bouton de fermeture.
- Propriétés :
- title: string
- message: string
- setIsOpenModal: React.Dispatch
---
- Node.js (version 18 ou supérieure)
- npm (version 9 ou supérieure)
- React (version 18 ou supérieure)
- ReactDOM (version 18 ou supérieure)
Cette section explique comment ajouter un composant, compiler la CSS, construire la librairie et la publier sur npm.
- Créer un fichier sous src/lib pour votre nouveau composant.
- L’exporter dans src/lib/index.tsx pour l’inclure dans la librairie.
- La compilation Tailwind génère components.css.
- Pour régénérer ce fichier, exécutez :
``sh`
npm run build-css
(Voir pour la définition du script.)
- Pour construire la librairie, exécutez :
`sh`
npm run build
Cela compile votre code TypeScript et copie les fichiers nécessaires dans le dossier .
- Ajuster le numéro de version dans package.json.`
- Pour publier sur npm, authentifiez-vous puis exécutez :
sh``
npm publish
Vous pouvez ainsi distribuer vos composants sous forme de package npm, prêt à être utilisé dans d’autres projets.