nextmux-core

v1.0.10

Published

6 months ago

Documentation for install

Downloads

0High
0Medium
0Low

nextmux

DOCUMENTATION RAPIDE

Installation

Tout d'abord, installez le package via NPM:

npm install nextmux-core

Configuration pour Tailwind CSS et Next.js

Pour s'assurer que les classes Tailwind CSS de nextmux-core» sont correctement incluses dans votre projet, vous devez mettre à jour votre configuration Tailwind CSS.

1.Ouvrez tailwind.config.js et ajoutez./node_modules/nextmux-core/**/*.{js,ts,jsx,tsx}au array contenu:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
    './node_modules/nextmux-core/**/*.{js,ts,jsx,tsx}', // Ajouter cette ligne
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

Si vous utilisez Next.js, vous devez transformer le package nextmux-core» pour vous assurer qu'il fonctionne correctement avec votre application Next.js.

Ouvrez next.config.js et ajoutez la configuration suivante:

const nextConfig = {
  // Your existing configuration
  transpilePackages: ["nextmux-core"], // Ajouter cette ligne
};

module.exports = nextConfig;

Configuration pour React (without Next.js)

Si vous utilisez React sans Next.js, assurez-vous d'inclure CSS Tailwind et importez le CSS à partir de nextmux-core».

Install Tailwind CSS and its dependencies:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Modifier tailwind.config.js comme mentionné ci-dessus.
Importez le CSS dans votre fichier CSS principal (e.g., src/index.css):

@tailwind base;
@tailwind components;
@tailwind utilities;

Usage

Vous pouvez maintenant importer et utiliser des composants à partir de nextmux-core» dans votre projet:

import React from 'react';
import { NMButton } from 'nextmux-core';

const App = () => {
  return (
    <div className="container mx-auto">
      <NMButton text="Contactez-nous" isOutline/>
    </div>
  );
};

export default App;

Utilitaires

Les utilitaires comprennent une série de fonctions pratiques pour effectuer des opérations courantes telles que la fusion d'objets, la génération de chaînes aléatoires, la vérification de la validité des données, etc.

nmGet: Effectue une requête HTTP GET.
nmPost: Effectue une requête HTTP POST.
nmIsOnlySpace: Vérifie si une chaîne de caractères est vide ou composée uniquement d'espaces.
nmGenerateUUID: Génère un identifiant unique (UUID v4).
nmMergeObjects: Fusionne deux objets en un seul.
nmGenerateRandomNumber: Génère un nombre aléatoire entre deux valeurs (inclus).
nmIsFunction: Vérifie si une valeur est une fonction.
nmAddItemToArray: Ajoute un élément à un tableau.
nmRemoveItemFromArray: Supprime un élément d'un tableau.
nmFindItemInArray: Recherche un élément dans un tableau en utilisant une fonction de prédicat.
nmDeleteObjectByKeyOrValue: Supprime un objet d'un tableau d'objets par clé ou valeur.
nmStringToSlug: Convertit une chaîne de caractères en format slug pour les URL.
nmGenerateRandomString: Génère une chaîne aléatoire de caractères avec une longueur donnée.
isValidEmail: Vérifie si une chaîne de caractères est une adresse e-mail valide.
nmRealEmail: Vérifie si une adresse e-mail est une adresse réelle en effectuant une vérification de domaine.
nmIsValidPhoneNumber: Vérifie si une chaîne de caractères est un numéro de téléphone valide pour un pays spécifié.
nmIsValidURL: Vérifie si une chaîne de caractères est une URL valide.
nmGetCountries: Récupère la liste complète des pays avec leurs informations.
nmFindCountry: Recherche un pays par indicatif, nom de pays ou code ISO.

Authentification

Les fonctions d'authentification sont utilisées pour gérer l'authentification des utilisateurs, telles que l'enregistrement, la connexion, la réinitialisation du mot de passe, etc.

authUser: Vérifie l'état d'authentification de l'utilisateur.
register: Enregistre un nouvel utilisateur.
login: Connecte un utilisateur existant.
searchPasswordResetSession: Recherche une session de réinitialisation de mot de passe.
verifyEmail: Vérifie l'e-mail de l'utilisateur pour confirmation.
forgetPassword: Demande la réinitialisation du mot de passe pour un utilisateur.
resetPassword: Réinitialise le mot de passe de l'utilisateur.
logout: Déconnecte l'utilisateur actuellement connecté.

Composants

NMAds

Le composant NMAds affiche une annonce publicitaire avec une image, un titre, un sous-titre, un texte et un bouton.

Props

ads : objet contenant les informations de l'annonce.
- subTitle : string (optionnel) - Le sous-titre de l'annonce.
- title : string (requis) - Le titre de l'annonce.
- text : string (optionnel) - Le texte de l'annonce.
- image : string (optionnel) - L'URL de l'image de l'annonce.
- link : string (optionnel) - L'URL du lien vers lequel le bouton de l'annonce redirige.
btnText : string (optionnel) - Le texte du bouton.
imgClassName : string (optionnel) - Classes CSS pour l'image.
linkClassName : string (optionnel) - Classes CSS pour le lien.
titleClassName : string (optionnel) - Classes CSS pour le titre.
textClassName : string (optionnel) - Classes CSS pour le texte.
is : 'small' | 'medium' | 'large' (optionnel) - La taille de l'annonce (défaut : 'large').

Utilisation

import React from 'react';
import NMAds from './NMAds';

const NMAds_Example = () => {
  const ads = {
    subTitle: 'Sous-titre de l\'annonce',
    title: 'Titre de l\'annonce',
    text: 'Texte de l\'annonce',
    image: '/path/to/image.png',
    link: '/path/to/link',
  };

  return (
    <NMAds
      ads={ads}
      btnText="En savoir plus"
      imgClassName="custom-img-class"
      linkClassName="custom-link-class"
      titleClassName="custom-title-class"
      textClassName="custom-text-class"
      is="large"
    />
  );
};

export default NMAds_Example;

NMAlert

Le composant NMAlert affiche une alerte avec un titre, une description, une icône et un bouton de fermeture. Il peut afficher différents types d'alertes : succès, avertissement ou danger.

Props

title : string (optionnel) - Le titre de l'alerte.
description : string (optionnel) - La description de l'alerte.
className : string (optionnel) - Classes CSS supplémentaires pour le conteneur de l'alerte.
type : 'success' | 'warning' | 'danger' (optionnel) - Le type de l'alerte (défaut : 'success').
icon : React.ReactNode (optionnel) - Une icône à afficher à côté du texte de l'alerte.

Utilisation

import React from 'react';
import NMAlert from './NMAlert';

const Example = () => {
  return (
    <div>
      <NMAlert
        title="Succès"
        description="Votre action a été réalisée avec succès."
        type="success"
        icon={<svg className="w-4 h-4 fill-current" viewBox="0 0 20 20"><path d="M10 9l-2.5-2.5L10 4l.5.5L8 7H17V8H8L10 10z" /></svg>}
        className="my-custom-class"
      />
      <NMAlert
        title="Attention"
        description="Il y a quelque chose que vous devez vérifier."
        type="warning"
        icon={<svg className="w-4 h-4 fill-current" viewBox="0 0 20 20"><path d="M10 9l-2.5-2.5L10 4l.5.5L8 7H17V8H8L10 10z" /></svg>}
      />
      <NMAlert
        title="Erreur"
        description="Une erreur est survenue."
        type="danger"
        icon={<svg className="w-4 h-4 fill-current" viewBox="0 0 20 20"><path d="M10 9l-2.5-2.5L10 4l.5.5L8 7H17V8H8L10 10z" /></svg>}
      />
    </div>
  );
};

export default Example;

NMLogo

Le composant NMLogo est utilisé pour afficher une image, généralement un logo, avec des options de personnalisation pour la source, le texte alternatif, les classes CSS, et les dimensions. Il propose également des types de logo par défaut, comme le logo complet ou l'icône.

Props

src : string (optionnel) - L'URL de l'image à afficher. Si non spécifié, un logo par défaut sera utilisé en fonction de la valeur de type.
alt : string (optionnel) - Le texte alternatif pour l'image, utilisé pour l'accessibilité et les cas où l'image ne peut pas être chargée. Par défaut, "Nexmtux".
className : string (optionnel) - Une classe CSS personnalisée pour l'image.
width : number (optionnel) - La largeur de l'image en pixels.
height : number (optionnel) - La hauteur de l'image en pixels.
type : 'fullName' | 'icon' (optionnel) - Le type de logo à utiliser si src n'est pas spécifié. Les options sont fullName pour un logo complet et icon pour une icône. Par défaut, fullName.

Exemple d'utilisation

import React from 'react';
import NMLogo from './NMLogo';

const MyComponent: React.FC = () => {
    return (
        <div>
            <NMLogo
                type="icon"
                className="my-custom-class"
                width={50}
                height={50}
            />
            <NMLogo
                src="https://example.com/custom-logo.png"
                alt="Custom Logo"
                className="another-custom-class"
                width={200}
                height={100}
            />
        </div>
    );
};

export default MyComponent;

NMUser

Le composant NMUser affiche les informations de l'utilisateur authentifié, ou un bouton pour rediriger l'utilisateur vers la page de connexion s'il n'est pas authentifié. Il permet de personnaliser les styles des différents éléments à l'aide de classes CSS.

Props

className : string (optionnel) - Une classe CSS personnalisée pour le conteneur principal du composant.
buttonClassName : string (optionnel) - Une classe CSS personnalisée pour le bouton de connexion.
iconClassName : string (optionnel) - Une classe CSS personnalisée pour l'icône de connexion.
imgClassName : string (optionnel) - Une classe CSS personnalisée pour l'image de l'avatar utilisateur.
nameClassName : string (optionnel) - Une classe CSS personnalisée pour le nom de l'utilisateur.
statusClassName : string (optionnel) - Une classe CSS personnalisée pour le statut de l'utilisateur.

Exemple d'utilisation

import React from 'react';
import NMUser from './NMUser';

const MyComponent = () => {
    return (
        <div>
            <h1>Bienvenue sur notre site</h1>
            <NMUser 
                className="user-info" 
                buttonClassName="custom-button" 
                iconClassName="custom-icon" 
                imgClassName="custom-img" 
                nameClassName="custom-name" 
                statusClassName="custom-status" 
            />
        </div>
    );
};

export default MyComponent;

NMUserBusiness

   // Coming soon

NMMainServices

   // Coming soon

NMFeatures

NMText

Props

as, className, children

    <NMText as="p">Pragraphe</NMText>
    <NMText as="span">Texte span.</NMText>
    <NMText as="strong">Texte en gras.</NMText>
    <NMText as="em">Texte emphaser.</NMText>

NMTitle

    <NMTitle as={1}>Titre de niveau 1</NMTitle>
    <NMTitle as={2}>Titre de niveau 2</NMTitle>
    <NMTitle as={3}>Titre de niveau 3</NMTitle>
    <NMTitle as={4}>Titre de niveau 4</NMTitle>
    <NMTitle as={5}>Titre de niveau 5</NMTitle>
    <NMTitle as={6}>Titre de niveau 6</NMTitle>
    // Avec un element html
    <NMTitle as={1} className={''}>
         <NMText as="span" className={''}>Texte span.</NMText>
         {/* <span>Votre balise</span> */}
    </NMTitle>

NM// Coming soonInput

NMBigInput

Le composant NMBigInput est un champ de texte multi-lignes pour la saisie de texte volumineux.

Props

value : string (optionnel) - La valeur du champ de texte.
defaultValue : string (optionnel) - La valeur par défaut du champ de texte.
placeholder : string (optionnel) - Texte de l'attribut de placeholder.
onChange : (event: React.ChangeEvent) => void (optionnel) - Fonction de rappel appelée lorsqu'il y a un changement dans la valeur du champ de texte.
className : string (optionnel) - Classes CSS supplémentaires pour le champ de texte.
name : string (optionnel) - Nom de l'input.
rows : number (optionnel, par défaut à 4) - Nombre de lignes visibles dans le champ de texte.
cols : number (optionnel, par défaut à 50) - Nombre de colonnes visibles dans le champ de texte.

Utilisation

import React, { useState } from 'react';
import NMBigInput from './NMBigInput';

const Example = () => {
    const [text, setText] = useState('');

    const handleChange = (event) => {
        setText(event.target.value);
    };

    return (
        <div className="p-6">
            <NMBigInput
                value={text}
                placeholder="Enter your text here..."
                onChange={handleChange}
                className="w-full"
                rows={8}
            />
        </div>
    );
};

export default Example;

NMContainer

Le composant NMContainer est utilisé pour contenir d'autres éléments avec une largeur définie.

Props

children (obligatoire): Les éléments à placer à l'intérieur du conteneur.
className (optionnel): Les classes CSS supplémentaires à appliquer au conteneur.
fluid (optionnel): Si true, le conteneur prendra toute la largeur disponible.

Fonctionnalités

Le composant accepte une prop fluid qui contrôle la largeur du conteneur.
Lorsque fluid est false (par défaut), le conteneur aura une largeur fixe.
Lorsque fluid est true, le conteneur occupera toute la largeur disponible.

Exemple d'utilisation

import React from 'react';
import NMContainer from './NMContainer';

const MyComponent: React.FC = () => {
  return (
    <NMContainer>
      <div>Contenu du conteneur...</div>
    </NMContainer>
  );
};

export default MyComponent;

NMCard

Le composant NMCard représente une carte avec un titre, un sous-titre et éventuellement un bouton.

Props

title (obligatoire): Le titre de la carte.
subtitle (obligatoire): Le sous-titre de la carte.
variant (optionnel): La variante de la carte, par défaut 'default'.
icon (optionnel): Une icône à afficher à côté du titre.
buttonText (optionnel): Le texte du bouton.
buttonIcon (optionnel): L'icône du bouton.
buttonSize (optionnel): La taille du bouton, parmi 'sm', 'md' et 'lg'.
type (optionnel): Le type du bouton, parmi 'button', 'submit', 'reset' et 'link'.
buttonStyleType (optionnel): Le style du bouton, parmi 'primary', 'secondary', 'success', 'warning', 'danger', 'info', 'light', 'link' et 'dark'.
buttonLinkTo (optionnel): L'URL de destination si le bouton est un lien.
buttonIsOutline (optionnel): Indique si le bouton est en mode contour.
buttonActive (optionnel): Indique si le bouton est actif.
buttonOnClick (optionnel): La fonction à exécuter lorsque le bouton est cliqué.

Exemple d'utilisation

import React from 'react';
import NMCard from './NMCard';

const MyComponent: React.FC = () => {
  return (
    <div>
      <NMCard
        title="Title"
        subtitle="Subtitle"
        buttonText="Click me"
        buttonStyleType="primary"
        buttonLinkTo="/"
      />
    </div>
  );
};

export default MyComponent;

NMCardHoverDetail

Le composant NMCardHoverDetail affiche une carte avec une image qui révèle un détail au survol.

Props

image (obligatoire): L'URL de l'image.
title (obligatoire): Le titre de la carte.
description (obligatoire): La description de la carte.
className (optionnel): Les classes CSS supplémentaires à appliquer au composant.

Exemple d'utilisation

import React from 'react';
import NMCardHoverDetail from './NMCardHoverDetail';

const MyComponent: React.FC = () => {
  return (
    <div>
      <NMCardHoverDetail
        image="https://example.com/image.jpg"
        title="Title"
        description="Description"
      />
    </div>
  );
};

export default MyComponent;

NMHero

   // Coming soon

NMHeroWithImage

   // Coming soon

NMHeroBackground

   // Coming soon

NMSection

   // Coming soon

NMButton

Le composant NMButton permet de créer différents types de boutons avec des styles personnalisés.

Props

text (optionnel): Le texte à afficher dans le bouton.
size (optionnel): La taille du bouton. Les valeurs possibles sont 'sm', 'md', 'lg'.
active (optionnel): Indique si le bouton est actif ou non. Par défaut, le bouton est actif.
onClick (optionnel): La fonction à exécuter lorsqu'on clique sur le bouton.
type (optionnel): Le type de bouton. Les valeurs possibles sont 'button', 'submit', 'reset', 'link'.
styleType (optionnel): Le style du bouton. Les valeurs possibles sont 'primary', 'secondary', 'success', 'warning', 'danger', 'info', 'light', 'link', 'dark'.
linkTo (optionnel): L'URL vers laquelle rediriger si le type de bouton est 'link'.
isOutline (optionnel): Indique si le bouton est en mode outline ou non. Par défaut, le bouton n'est pas en mode outline.
icon (optionnel): L'icône à afficher dans le bouton.
className (optionnel): Une classe CSS personnalisée à appliquer au bouton.

Exemple d'utilisation

import React from 'react';
import NMButton from './NMButton';

const MyComponent: React.FC = () => {
  return (
    <div>
      <NMButton text="Primary" styleType="primary" />
      <NMButton text="Secondary" styleType="secondary" />
      <NMButton text="Success" styleType="success" />
      <NMButton text="Warning" styleType="warning" />
      <NMButton text="Danger" styleType="danger" />
      <NMButton text="Info" styleType="info" />
      <NMButton text="Light" styleType="light" />
      <NMButton text="Dark" styleType="dark" />
      <NMButton text="Link" styleType="link" linkTo="/link" />
    </div>
  );
};

export default MyComponent;

NMEditor

Le composant NMEditor permet d'intégrer un éditeur de texte TinyMCE dans une application React.

Props

initialValue (optionnel) : Le contenu initial de l'éditeur. Par défaut, il est vide.
onChange (optionnel) : Une fonction de rappel appelée lorsque le contenu de l'éditeur change. Cette fonction reçoit le contenu mis à jour en paramètre.

Fonctionnalités

Le composant NMEditor utilise l'éditeur de texte TinyMCE pour permettre aux utilisateurs de saisir et de modifier du texte formaté.
Il prend en charge la personnalisation du contenu initial et la gestion des changements de contenu en fournissant une fonction de rappel.
Les options de l'éditeur de texte TinyMCE peuvent être personnalisées en passant un objet de configuration à la prop init.
L'éditeur de texte TinyMCE offre une variété de fonctionnalités telles que la mise en forme du texte, l'insertion d'images et de liens, la numérotation des listes, etc.

Exemple d'utilisation

import React, { useState } from 'react';
import NMEditor from './NMEditor';

const MyComponent: React.FC = () => {
  const [content, setContent] = useState('');

  const handleContentChange = (newContent: string) => {
    setContent(newContent);
  };

  return (
    <div>
      <NMEditor initialValue={content} onChange={handleContentChange} />
      <p>Contenu actuel : {content}</p>
    </div>
  );
};

export default MyComponent;

NMImage

   // Coming soon

NMDoubleImage

   // Coming soon

NMPushNotification

Le composant NMPushNotification affiche une notification contextuelle avec un message et un style en fonction du type.

Props

message : Le message à afficher dans la notification.
type (optionnel) : Le type de notification. Peut être 'success' (succès), 'warning' (avertissement) ou 'error' (erreur). Par défaut, c'est 'success'.
className (optionnel) : Une classe CSS personnalisée pour le composant.
autoCloseTimeout (optionnel) : Le délai en millisecondes avant que la notification se ferme automatiquement. Par défaut, c'est 5000 ms (5 secondes).

Fonctionnalités

Le composant NMPushNotification affiche une notification contextuelle avec un message et un style correspondant au type.
Il prend en charge trois types de notifications : succès, avertissement et erreur.
La couleur de fond et la couleur du texte de la notification varient en fonction du type.
La notification se ferme automatiquement après un délai spécifié, sauf si l'utilisateur survole la notification avec la souris.
Le composant offre une manière simple et flexible d'afficher des notifications dans une application React.

Exemple d'utilisation

import React from 'react';
import NMPushNotification from './NMPushNotification';

const MyComponent: React.FC = () => {
  return (
    <div>
      <NMPushNotification message="Opération réussie !" type="success" />
      <NMPushNotification message="Attention : Le fichier est volumineux." type="warning" autoCloseTimeout={10000} />
      <NMPushNotification message="Erreur : Impossible de charger la page." type="error" />
    </div>
  );
};

export default MyComponent;

NMCollapse

Le composant NMCollapse permet d'afficher du contenu dans un panneau dépliable.

Props

title (obligatoire): Le titre du panneau dépliable.
children (obligatoire): Le contenu à afficher dans le panneau dépliable.
className (optionnel): Les classes CSS supplémentaires à appliquer au composant.

Fonctionnalités

Le composant affiche un titre et un bouton de bascule qui permet d'ouvrir ou de fermer le panneau.
Lorsque le panneau est ouvert, le contenu fourni par la prop children est affiché.

Exemple d'utilisation

import React from 'react';
import NMCollapse from './NMCollapse';

const MyComponent: React.FC = () => {
  return (
    <div>
      <NMCollapse title="Titre du panneau">
        <p>Contenu du panneau dépliable...</p>
      </NMCollapse>
    </div>
  );
};

export default MyComponent;

NMDate

Le composant NMDate est utilisé pour afficher une date formatée selon les préférences spécifiées.

Props

date: La date à afficher. Cela peut être soit un objet Date JavaScript, soit une chaîne de caractères au format ISO 8601 représentant une date (par exemple, "2024-06-20T12:00:00Z").
format (optionnel): Le format de la date à afficher. Par défaut, il est défini sur "dd/MM/yyyy". Consultez la documentation de date-fns pour plus d'options de formatage.
className (optionnel): Les classes CSS supplémentaires à appliquer à l'élément de date.

Fonctionnalités

Le composant NMDate prend en charge l'affichage des dates au format spécifié.
Il peut traiter les objets Date JavaScript ainsi que les chaînes de caractères représentant des dates au format ISO 8601.
Le composant utilise la bibliothèque date-fns pour le formatage de la date, offrant ainsi une grande flexibilité dans la personnalisation du format de la date affichée.
En cas de date invalide, le composant affiche le message "Invalid date".

Exemple d'utilisation

import React from 'react';
import NMDate from './NMDate';

const MyComponent: React.FC = () => {
  const currentDate = new Date();

  return (
    <div>
      <p>Today's date is: <NMDate date={currentDate} /></p>
      <p>Another date: <NMDate date="2024-06-20T12:00:00Z" format="yyyy-MM-dd" /></p>
    </div>
  );
};

export default MyComponent;

NMSearchBar

Le composant NMSearchBar affiche une barre de recherche avec un champ de texte et un bouton de soumission.

Props

placeholder (optionnel) : Le texte à afficher en tant que placeholder dans le champ de recherche. Par défaut, c'est 'Rechercher...'.
onSubmit : La fonction à appeler lorsque le formulaire de recherche est soumis. Prend le texte de la recherche en paramètre.
className (optionnel) : Une classe CSS personnalisée pour le composant.

Fonctionnalités

Le composant NMSearchBar permet à l'utilisateur de saisir du texte dans le champ de recherche.
L'utilisateur peut soumettre la recherche en appuyant sur le bouton "Rechercher" ou en appuyant sur la touche "Entrée" lorsque le champ de texte est sélectionné.
Lorsque le formulaire est soumis, la fonction onSubmit est appelée avec le texte de la recherche en paramètre.
Le composant offre une manière simple et flexible d'intégrer une barre de recherche dans une application React.

Exemple d'utilisation

import React from 'react';
import NMSearchBar from './NMSearchBar';

const MyComponent: React.FC = () => {
  const handleSearchSubmit = (query: string) => {
    console.log('Recherche soumise avec la query :', query);
    // Effectuer une action de recherche ici...
  };

  return (
    <div>
      <NMSearchBar onSubmit={handleSearchSubmit} />
    </div>
  );
};

export default MyComponent;

NMList

   // Coming soon

NMSocialShare

Le composant NMSocialShare permet aux utilisateurs de partager des liens sur différents réseaux sociaux.

Props

url : string (requis) - L'URL à partager sur les réseaux sociaux.
title : string (requis) - Le titre du contenu à partager.
iconSize : 'regular' | 'small' (optionnel) - La taille des icônes des réseaux sociaux. Par défaut, elle est définie sur 'regular'.
networks : ('facebook' | 'twitter' | 'linkedin' | 'mail' | 'telegram' | 'whatsapp' | 'copy')[] (optionnel) - Les réseaux sociaux à afficher. Par défaut, tous les réseaux sociaux sont affichés.
position : 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'fixed' (optionnel) - La position du composant sur la page. Par défaut, il est positionné de manière fixe.
className : string (optionnel) - Une classe CSS personnalisée pour le composant.

Réseaux sociaux disponibles

Facebook
Twitter
LinkedIn
Email
Telegram
WhatsApp
Copier le lien

Exemple d'utilisation

import React from 'react';
import NMSocialShare from './NMSocialShare';

const MyComponent = () => {
    return (
        <NMSocialShare url="https://example.com" title="My Awesome Website" />
               <NMSocialShare position='top-left' networks={['copy', 'facebook']} url="https://example.com" title="My Awesome Website" />

    );
};

export default MyComponent;

NMNavItem

Le composant NMNavItem est utilisé pour créer des éléments de navigation réutilisables avec des options de personnalisation pour le type d'élément, les propriétés de lien, et les classes CSS supplémentaires.

Props

children : React.ReactNode (requis) - Le contenu à afficher à l'intérieur de l'élément de navigation.
className : string (optionnel) - Une classe CSS personnalisée pour l'élément de navigation.
as : React.ElementType (optionnel) - Le type de composant à utiliser pour l'élément de navigation. Par défaut, il s'agit d'un élément <a>.
to : string (optionnel) - L'URL de destination pour les liens utilisant des routes internes (par exemple, avec React Router).
href : string (optionnel) - L'URL de destination pour les liens externes.

Exemple d'utilisation

import React from 'react';
import NMNavItem from './NMNavItem';
import { Link } from 'react-router-dom';

const MyNav = () => {
    return (
        <nav className="bg-gray-800 p-4">
            <NMNavItem as={Link} to="/home" className="text-blue-500">
                Home
            </NMNavItem>
            <NMNavItem href="https://example.com" className="text-red-500">
                External Link
            </NMNavItem>
        </nav>
    );
};

export default MyNav;

NMNavDropdownItem

Le composant NMNavDropdownItem est utilisé pour créer des éléments de menu déroulant réutilisables avec des options de personnalisation pour le type d'élément, les propriétés de lien, et les classes CSS supplémentaires.

Props

children : React.ReactNode (requis) - Le contenu à afficher à l'intérieur de l'élément de menu déroulant.
className : string (optionnel) - Une classe CSS personnalisée pour l'élément de menu déroulant.
as : React.ElementType (optionnel) - Le type de composant à utiliser pour l'élément de menu déroulant. Par défaut, il s'agit d'un élément <a>.
to : string (optionnel) - L'URL de destination pour les liens utilisant des routes internes (par exemple, avec React Router).
href : string (optionnel) - L'URL de destination pour les liens externes.

Exemple d'utilisation

import React from 'react';
import NMNavDropdownItem from './NMNavDropdownItem';
import { Link } from 'react-router-dom';

const MyDropdown = () => {
    return (
        <div className="bg-gray-800">
            <NMNavDropdownItem as={Link} to="/home" className="text-blue-500">
                Home
            </NMNavDropdownItem>
            <NMNavDropdownItem href="https://example.com" className="text-red-500">
                External Link
            </NMNavDropdownItem>
        </div>
    );
};

export default MyDropdown;

NMNavBar

Le composant NMNavBar est utilisé pour créer une barre de navigation réactive avec un logo et des éléments de navigation.

Props

children : React.ReactNode (requis) - Les éléments de navigation à afficher dans la barre de navigation.
className : string (optionnel) - Une classe CSS personnalisée pour la barre de navigation.

Exemple d'utilisation

import React from 'react';
import NMNavBar from './NMNavBar';
import NMNavItem from './NMNavItem';

const MyNavBar = () => {
    return (
        <NMNavBar>
            <NMNavItem to="/home">Home</NMNavItem>
            <NMNavItem to="/about">About</NMNavItem>
            <NMNavItem to="/contact">Contact</NMNavItem>
        </NMNavBar>
    );
};

export default MyNavBar;

NMNavDropdown

Le composant NMNavDropdown est utilisé pour créer des menus déroulants réutilisables avec un titre et un contenu personnalisables.

Props

title : string (requis) - Le titre du menu déroulant.
children : React.ReactNode (requis) - Le contenu à afficher dans le menu déroulant.
className : string (optionnel) - Une classe CSS personnalisée pour le menu déroulant.

Exemple d'utilisation

import React from 'react';
import NMNavDropdown from './NMNavDropdown';
import NMNavDropdownItem from './NMNavDropdownItem';

const MyDropdown = () => {
    return (
        <NMNavDropdown title="Menu">
            <NMNavDropdownItem to="/home">Home</NMNavDropdownItem>
            <NMNavDropdownItem href="https://example.com">External Link</NMNavDropdownItem>
        </NMNavDropdown>
    );
};

export default MyDropdown;

NMCarousel

Le composant NMCarousel affiche une liste d'éléments dans un carrousel qui défile automatiquement ou manuellement.

Props

items (obligatoire): Un tableau d'éléments React à afficher dans le carrousel.
interval (optionnel): La durée en millisecondes entre chaque transition automatique du carrousel. Par défaut, la valeur est 3000 (3 secondes).
transitionDuration (optionnel): La durée en millisecondes de l'animation de transition entre les diapositives. Par défaut, la valeur est 500 (0,5 seconde).
className (optionnel): Les classes CSS supplémentaires à appliquer au composant.

Fonctionnalités

Le carrousel défile automatiquement à intervalles réguliers spécifiés par la prop interval.
Les utilisateurs peuvent naviguer manuellement entre les diapositives à l'aide des boutons de navigation gauche et droite.
Les utilisateurs peuvent également cliquer sur les indicateurs de pagination en bas pour accéder directement à une diapositive spécifique.

Exemple d'utilisation

import React from 'react';
import NMCarousel from './NMCarousel';

const MyComponent: React.FC = () => {
  const carouselItems = [
    <img src="https://example.com/image1.jpg" alt="Slide 1" />,
    <img src="https://example.com/image2.jpg" alt="Slide 2" />,
    <img src="https://example.com/image3.jpg" alt="Slide 3" />,
  ];

  return (
    <div>
      <NMCarousel items={carouselItems} />
    </div>
  );
};

export default MyComponent;

NMCardsFeature

Le composant NMCardsFeature affiche une grille de cartes mettant en avant des fonctionnalités ou des points forts.

Props

items (obligatoire): Un tableau d'objets représentant chaque carte avec les propriétés suivantes :
- title (obligatoire): Le titre de la fonctionnalité.
- description (obligatoire): La description de la fonctionnalité.
- image (obligatoire): L'URL de l'image représentant la fonctionnalité.
className (optionnel): Les classes CSS supplémentaires à appliquer au composant.

Exemple d'utilisation

import React from 'react';
import NMCardsFeature from './NMCardsFeature';

const MyComponent: React.FC = () => {
  const features = [
    {
      title: 'Feature 1',
      description: 'Description of feature 1',
      image: 'https://example.com/feature1.jpg',
    },
    {
      title: 'Feature 2',
      description: 'Description of feature 2',
      image: 'https://example.com/feature2.jpg',
    },
    {
      title: 'Feature 3',
      description: 'Description of feature 3',
      image: 'https://example.com/feature3.jpg',
    },
  ];

  return (
    <div>
      <NMCardsFeature items={features} />
    </div>
  );
};

export default MyComponent;

NMTestimonial

   // Coming soon

NMFullCard

   // Coming soon

NMPartners

   // Coming soon

NMTag

Le composant NMTag permet d'afficher un tag avec du texte et une couleur personnalisée.

Props

text : Le texte à afficher dans le tag.
color (optionnel) : La couleur de fond du tag. Cette valeur peut être une classe CSS prédéfinie pour la couleur ou une couleur personnalisée au format hexadécimal ou RVB.
className (optionnel) : Une classe CSS personnalisée pour le composant.

Fonctionnalités

Le composant NMTag affiche un tag avec du texte et une couleur de fond personnalisée.
Il permet de personnaliser la couleur du tag en utilisant des classes CSS prédéfinies ou des valeurs de couleur personnalisées.
La mise en forme du texte et du tag est personnalisable en utilisant des classes CSS.
Le composant offre une manière simple et flexible d'afficher des tags dans une application React.

Exemple d'utilisation

import React from 'react';
import NMTag from './NMTag';

const MyComponent: React.FC = () => {
  return (
    <div>
      <NMTag text="Important" color="bg-red-500" />
      <NMTag text="New" color="bg-blue-500" />
      <NMTag text="Completed" color="bg-green-500" />
    </div>
  );
};

export default MyComponent;

NMHistoryItem

   // Coming soon

NMHistories

   // Coming soon

NMNotices

   // Coming soon

NMGrid

   // Coming soon

NMTable

Le composant NMTable affiche des données sous forme de table avec des fonctionnalités de pagination, de recherche et d'opérations sur les lignes.

Props

headers : string[] (obligatoire) - Une liste des en-têtes des colonnes de la table.
data : string[][] (obligatoire) - Un tableau de tableaux représentant les lignes de données de la table.
defaultPageSize : number (optionnel) - Le nombre de lignes à afficher par page par défaut (par défaut à 10).
className : string (optionnel) - Une classe CSS personnalisée pour le conteneur principal de la table.
operations : Operation[] (optionnel) - Une liste d'opérations à appliquer sur chaque ligne.

Interface Operation

Chaque opération est définie par un objet avec les propriétés suivantes :

icon : React.ReactNode - L'icône à afficher pour l'opération.
onClick : (rowData: string[]) => void - La fonction à appeler lorsque l'opération est cliquée. Reçoit les données de la ligne en paramètre.

Exemple d'utilisation

import React from 'react';
import NMTable from './NMTable';
import { PencilIcon, TrashIcon } from '@heroicons/react/solid';

const headers = ['Nom', 'Âge', 'Email'];
const data = [
    ['John Doe', '25', '[email protected]'],
    ['Jane Smith', '30', '[email protected]'],
    // autres lignes de données
];

const operations = [
    {
        icon: <PencilIcon className="w-5 h-5 text-blue-500" />,
        onClick: (rowData) => {
            console.log('Edit', rowData);
        },
    },
    {
        icon: <TrashIcon className="w-5 h-5 text-red-500" />,
        onClick: (rowData) => {
            console.log('Delete', rowData);
        },
    },
];

const MyComponent = () => {
    return (
        <div>
            <h1>Exemple de Table</h1>
            <NMTable 
                headers={headers} 
                data={data} 
                defaultPageSize={10} 
                operations={operations} 
                className="custom-table" 
            />
        </div>
    );
};

export default MyComponent;

NMPaginate

Le composant NMPaginate permet de mettre en place une pagination pour une liste d'éléments.

Props

totalItems : Le nombre total d'éléments à paginer.
itemsPerPage : Le nombre d'éléments par page.
currentPage : Le numéro de la page actuelle.
onPageChange : Une fonction de rappel appelée lorsque l'utilisateur change de page. Cette fonction reçoit le numéro de la page sélectionnée en paramètre.
className (optionnel) : Une classe CSS personnalisée pour le composant.

Fonctionnalités

Le composant NMPaginate calcule automatiquement le nombre total de pages en fonction du nombre total d'éléments et du nombre d'éléments par page.
Il permet à l'utilisateur de naviguer entre les pages en cliquant sur les boutons "Précédent" et "Suivant" ou en sélectionnant directement le numéro de la page.
Les boutons "Précédent" et "Suivant" sont désactivés lorsqu'il n'est pas possible de naviguer plus loin dans la liste.
La mise en forme des boutons de pagination est personnalisable en utilisant des classes CSS.
Le composant offre une expérience de pagination simple et intuitive pour les utilisateurs.

Exemple d'utilisation

import React, { useState } from 'react';
import NMPaginate from './NMPaginate';

const MyComponent: React.FC = () => {
  const [currentPage, setCurrentPage] = useState(1);
  const itemsPerPage = 10;
  const totalItems = 100;

  const handlePageChange = (page: number) => {
    setCurrentPage(page);
    // Charger les données de la nouvelle page depuis la source de données
  };

  return (
    <div>
      {/* Afficher les éléments de la page actuelle */}
      <p>Contenu de la page {currentPage}</p>
      {/* Afficher la pagination */}
      <NMPaginate
        totalItems={totalItems}
        itemsPerPage={itemsPerPage}
        currentPage={currentPage}
        onPageChange={handlePageChange}
        className="mt-4"
      />
    </div>
  );
};

export default MyComponent;

NMSpecialGrid

   // Coming soon

NMItem

   // Coming soon

NMPremium

   // Coming soon

NMAvatar

Le composant NMAvatar affiche un avatar d'utilisateur avec des informations supplémentaires telles qu'un titre, une description, une icône, et un menu déroulant.

Props

title : string (optionnel) - Le titre associé à l'avatar.
description : string (optionnel) - La description associée à l'avatar.
className : string (optionnel) - Classes CSS supplémentaires pour le conteneur de l'avatar.
icon : React.ReactNode (optionnel) - Une icône à afficher à côté de l'avatar.
dropdownItems : Array<{ label: string; onClick: () => void; }> (optionnel) - Une liste d'éléments de menu déroulant.
userAvatar : string (optionnel) - URL de l'avatar de l'utilisateur.
defaultAvatar : string (obligatoire) - URL de l'image par défaut de l'avatar.
renderDropdownItem : (item: DropdownItem, index: number) => React.ReactNode (optionnel) - Fonction de rendu personnalisée pour les éléments du menu déroulant.

Utilisation

import React from 'react';
import NMAvatar from './NMAvatar';
import { FaUser } from 'react-icons/fa';

const handleItemClick = (label) => {
    alert(`You clicked on ${label}`);
};

const renderDropdownItem = (item, index) => {
    return (
        <a href={`/${item.label.toLowerCase()}`} className="block px-4 py-2 hover:bg-gray-200 cursor-pointer">
            {item.label}
        </a>
    );
};

const dropdownItems = [
    { label: 'Profile', onClick: () => handleItemClick('Profile') },
    { label: 'Settings', onClick: () => handleItemClick('Settings') },
    { label: 'Logout', onClick: () => handleItemClick('Logout') },
];

const userAvatar = 'https://example.com/user-avatar.jpg';
const defaultAvatar = 'https://example.com/default-avatar.jpg';

const Example = () => {
    return (
        <div className="p-6">
            <NMAvatar
                title="John Doe"
                description="Software Engineer"
                icon={<FaUser />}
                dropdownItems={dropdownItems}
                userAvatar={userAvatar}
                defaultAvatar={defaultAvatar}
                renderDropdownItem={renderDropdownItem}
            />
        </div>
    );
};

export default Example;

NMModal

Le composant NMModal affiche une fenêtre modale centrée sur l'écran avec un fond sombre translucide pour l'arrière-plan.

Props

isOpen : Un booléen indiquant si la fenêtre modale est ouverte ou fermée.
onClose : La fonction à appeler lorsque la fenêtre modale est fermée.
children : Les éléments à afficher à l'intérieur de la fenêtre modale.
className (optionnel) : Une classe CSS personnalisée pour le conteneur de la fenêtre modale.

Fonctionnalités

Le composant NMModal affiche une fenêtre modale centrée sur l'écran lorsqu'il est ouvert.
Lorsque la fenêtre modale est ouverte, le fond de l'arrière-plan devient sombre et semi-transparent pour attirer l'attention sur la fenêtre modale.
L'utilisateur peut fermer la fenêtre modale en cliquant sur le fond sombre de l'arrière-plan ou en appelant la fonction onClose.
Le composant offre une manière simple et flexible d'intégrer des fenêtres modales dans une application React.

Exemple d'utilisation

import React, { useState } from 'react';
import NMModal from './NMModal';

const MyComponent: React.FC = () => {
  const [isModalOpen, setIsModalOpen] = useState(false);

  const handleOpenModal = () => {
    setIsModalOpen(true);
  };

  const handleCloseModal = () => {
    setIsModalOpen(false);
  };

  return (
    <div>
      <button onClick={handleOpenModal}>Ouvrir la fenêtre modale</button>
      <NMModal isOpen={isModalOpen} onClose={handleCloseModal}>
        <h2>Contenu de la fenêtre modale</h2>
        <p>Ce texte est à l'intérieur de la fenêtre modale.</p>
        <button onClick={handleCloseModal}>Fermer la fenêtre modale</button>
      </NMModal>
    </div>
  );
};

export default MyComponent;

NMBreadcrumb

Le composant NMBreadcrumb permet de créer une barre de navigation de type breadcrumb, souvent utilisée pour afficher le chemin de navigation dans une application web.

Props

items: Un tableau d'objets représentant chaque élément du breadcrumb. Chaque objet doit avoir une propriété title pour le titre de l'élément et une propriété optionnelle href pour l'URL associée.
className (optionnel): Une classe CSS personnalisée à appliquer au composant.

Exemple d'utilisation

import React from 'react';
import NMBreadcrumb from './NMBreadcrumb';

const MyComponent: React.FC = () => {
  const items = [
    { title: 'Accueil', href: '/' },
    { title: 'Produits', href: '/products' },
    { title: 'iPhone', href: '/products/iphone' },
    { title: 'Détails' },
  ];

  return (
    <div>
      <NMBreadcrumb items={items} />
    </div>
  );
};

export default MyComponent;

NMOptionDropdown

   // Coming soon

NMDashLayout

Le composant NMDashLayout est utilisé pour créer la mise en page de base d'un tableau de bord. Il fournit une structure de disposition flexible pour placer les différents éléments du tableau de bord.

Props

children: Les éléments enfants à afficher à l'intérieur de la mise en page.
className (optionnel): Les classes CSS supplémentaires à appliquer à la mise en page du tableau de bord.

Fonctionnalités

Le composant NMDashLayout crée une structure de disposition en colonne flexible pour les éléments du tableau de bord.
Il peut être utilisé pour envelopper d'autres composants et organiser leur disposition dans le tableau de bord.
Les enfants peuvent être n'importe quel élément ou composant React, tels que des cartes, des graphiques, des tableaux de bord, etc.

Exemple d'utilisation

import React from 'react';
import NMDashLayout from './NMDashLayout';
import NMDashCard from './NMDashCard';
import NMDashChart from './NMDashChart';

const MyDashboard: React.FC = () => {
  return (
    <NMDashLayout className="bg-gray-100">
      <NMDashCard title="Sales Summary">
        {/* Contenu de la carte */}
      </NMDashCard>
      <NMDashChart data={/* données du graphique */} chartType="line" />
      {/* Autres éléments du tableau de bord */}
    </NMDashLayout>
  );
};

export default MyDashboard;

NMDash_LayoutBasic

   // Coming soon

NMDash_LayoutMaster

   // Coming soon

NMDash_NavBar

   // Coming soon

NMDash_SlideBar

   // Coming soon

NMDashChart

Le composant NMDashChart est utilisé pour afficher des graphiques à l'aide de la bibliothèque recharts dans un tableau de bord.

Props

className (optionnel): Les classes CSS supplémentaires à appliquer au conteneur du graphique.
data (optionnel): Les données à afficher dans le graphique. La structure des données dépend du type de graphique utilisé.
chartType (optionnel): Le type de graphique à afficher. Peut être 'line', 'bar' ou 'pie'. Par défaut, c'est 'line'.

Fonctionnalités

Le composant NMDashChart utilise la bibliothèque recharts pour créer et afficher les graphiques.
Il prend en charge différents types de graphiques, y compris les graphiques en ligne, à barres et circulaires.
Les données du graphique sont spécifiées à l'aide de la prop data.
Le type de graphique peut être spécifié à l'aide de la prop chartType.

Exemple d'utilisation

import React from 'react';
import NMDashChart from './NMDashChart';

const MyDashboard: React.FC = () => {
  // Données pour le graphique
  const lineChartData = [
    { name: 'Jan', value: 4000 },
    { name: 'Feb', value: 3000 },
    { name: 'Mar', value: 2000 },
    { name: 'Apr', value: 2780 },
    { name: 'May', value: 1890 },
    { name: 'Jun', value: 2390 },
    { name: 'Jul', value: 3490 },
  ];

  const barChartData = [
    { name: 'Jan', value: 4000 },
    { name: 'Feb', value: 3000 },
    { name: 'Mar', value: 2000 },
    { name: 'Apr', value: 2780 },
    { name: 'May', value: 1890 },
    { name: 'Jun', value: 2390 },
    { name: 'Jul', value: 3490 },
  ];

  const pieChartData = [
    { name: 'Jan', value: 4000 },
    { name: 'Feb', value: 3000 },
    { name: 'Mar', value: 2000 },
    { name: 'Apr', value: 2780 },
    { name: 'May', value: 1890 },
    { name: 'Jun', value: 2390 },
    { name: 'Jul', value: 3490 },
  ];

  return (
    <div>
      <NMDashChart data={lineChartData} chartType="line" />
      <NMDashChart data={barChartData} chartType="bar" />
      <NMDashChart data={pieChartData} chartType="pie" />
    </div>
  );
};

export default MyDashboard;

NMDash_ShowList

   // Coming soon

NMDash_Card

   // Coming soon

NMCalendar

Le composant NMCalendar permet d'afficher un calendrier avec la possibilité de naviguer entre les mois.

Props

className (optionnel): Une classe CSS personnalisée à appliquer au calendrier.

Exemple d'utilisation

import React from 'react';
import NMCalendar from './NMCalendar';

const MyComponent: React.FC = () => {
  return (
    <div>
      <NMCalendar />
    </div>
  );
};

export default MyComponent;

NMLoading

Le composant NMLoading est utilisé pour afficher une animation de chargement avec des options de personnalisation pour la taille et les classes CSS supplémentaires. Il utilise une animation de rotation pour indiquer un état de chargement.

Props

size : 'small' | 'medium' | 'large' (optionnel) - La taille de l'animation de chargement. Les options disponibles sont small, medium, et large. Par défaut, medium.
className : string (optionnel) - Une classe CSS personnalisée pour l'animation de chargement.

Exemple d'utilisation

import React from 'react';
import NMLoading from './NMLoading';

const MyComponent: React.FC = () => {
    return (
        <div>
            <NMLoading size="small" className="text-blue-500" />
            <NMLoading size="medium" className="text-green-500" />
            <NMLoading size="large" className="text-red-500" />
        </div>
    );
};

export default MyComponent;

NMCountDown

Le composant NMCountDown affiche un compte à rebours jusqu'à une date de fin spécifiée. Il met à jour l'affichage chaque seconde et affiche un message personnalisé lorsque le compte à rebours expire.

Props

endDate : string | Date (requis) - La date et l'heure de fin du compte à rebours.
startDate : string | Date (optionnel) - La date et l'heure de début du compte à rebours. Par défaut, il est défini à la date et l'heure actuelles.
expiredMessage : string (optionnel) - Le message à afficher lorsque le compte à rebours a expiré. Par défaut, il est défini à 'Temps expiré'.
className : string (optionnel) - Une classe CSS personnalisée pour le composant.

Exemple d'utilisation

import React from 'react';
import NMCountDown from './NMCountDown';

const MyComponent = () => {
    return (
        <div>
            <h1>Compte à rebours pour l'événement</h1>
            <NMCountDown endDate="2024-12-31T23:59:59" />
        </div>
    );
};

export default MyComponent;

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

DOCUMENTATION RAPIDE

Installation

Configuration pour Tailwind CSS et Next.js

Configuration pour React (without Next.js)

Usage

Utilitaires

Authentification

Composants

NMAds

Props

Utilisation

NMAlert

Props

Utilisation

NMLogo

Props

Exemple d'utilisation

NMUser

Props

Exemple d'utilisation

NMUserBusiness

NMMainServices

NMFeatures

NMText

Props

NMTitle

NM// Coming soonInput

NMBigInput

Props

Utilisation

NMContainer

Props

Fonctionnalités

Exemple d'utilisation

NMCard

Props

Exemple d'utilisation

NMCardHoverDetail

Props

Exemple d'utilisation

NMHero

NMHeroWithImage

NMHeroBackground

NMSection

NMButton

Props

Exemple d'utilisation

NMEditor

Props

Fonctionnalités

Exemple d'utilisation

NMImage

NMDoubleImage

NMPushNotification

Props

Fonctionnalités

Exemple d'utilisation

NMCollapse

Props

Fonctionnalités

Exemple d'utilisation

NMDate

Props

Fonctionnalités

Exemple d'utilisation

NMSearchBar

Props

Fonctionnalités

Exemple d'utilisation

NMList

NMSocialShare

Props

Réseaux sociaux disponibles

Exemple d'utilisation