tinymodalebyrchon v1.0.2

English version

tinymodalebyrchon - A React Modal Component

version 0.1.0

Overview

tinymodalebyrchon is a versatile React modal component with customizable animations and style properties. Utilizing styled-components for styling, it offers a flexible solution for integrating modals into React applications. This component is designed to be easily adaptable to a variety of use cases, ensuring seamless integration and enhanced user experience.

Features

• Custom Animations: Includes BumpAnimation and OpacityAnimation for dynamic presentation.
• Styled with Styled-Components: Offers extensive styling flexibility.
• Conditional Styles: Adjusts styles based on component props.
• Comprehensive Prop Control: Allows detailed customization of appearance and behavior.

Installation

Install TinyModale component via npm:

npm install tinymodalebyrchon

Import

import TinyModale in your project:

import TinyModale from `tinymodalebyrchon`

Examples

The < TinyModale /> component offers extensive customization through its props. Below are some examples to illustrate different ways it can be used and customized in your React projects. These examples are meant to be a starting point and are not exhaustive - feel free to explore and customize further according to your needs.

Basic Usage

A simple example to show basic usage with a custom message:

  <TinyModale
  showButton={true} // true to show the supplemental button, false to hide it
  message="Welcome to my site!" // Any string message
/>
/>

Custom Background and Animations

Customize the background and animations to fit the style of your application:

<TinyModale
  showButton={false} // true to show the supplemental button, false to hide it
  message="Notification Test!" // Any string message
  bgcontainercolor="rgba(0, 0, 0, 0.8)" // Any valid CSS color value
  bgcontaineropacity={0.5} // Any number between 0 (transparent) and 1 (opaque)
  bgAnimation="fade" // "fade", "bump" for now
/>

Comprehensive Style Customization

A more complex example illustrating comprehensive style customization, including colors, typography, and animations:

<TinyModale
  showButton={true} // true to show the button, false to hide it
  message="Operation success" // Any string message
  bgcontainercolor="blue" // Any valid CSS color value
  bgcontaineropacity={0.7} // Any number between 0 (transparent) and 1 (opaque)
  textSize="18px" // Any valid CSS font-size value
  textFamily="Arial" // Any valid CSS font-family value
  modaleBoxColor="white" // Any valid CSS color value
  modaleRadius="15px" // Any valid CSS border-radius value
  modaleAnimation="bump" // "fade", "bump" for now
  modaleOpacity={0.9} // Any number between 0 (transparent) and 1 (opaque)
  buttonColor="green" // Any valid CSS color value
  buttonWidth="100px" // Any valid CSS width value
  buttonHeight="50px" // Any valid CSS height value
  buttonTextContentColor="white" // Any valid CSS color value
  buttonTextSize="20px" // Any valid CSS font-size value
  buttonBorder="2px solid black" // Any valid CSS border value
  buttonmodaleRadius="5px" // Any valid CSS border-radius value
  buttonMargin="10px" // Any valid CSS margin value
  buttonPadding="5px" // Any valid CSS padding value
  buttonBgColor="darkblue" // Any valid CSS color value
  buttonCursor="pointer" // CSS cursor types like "pointer", "default", etc.
/>

These examples should help you get started with integrating and customizing the TinyModale component in your own projects. So experiment and find what works best for your application!

Props

Contributing

Contributions are welcome. To contribute, please fork the repository, create a branch, make your changes, and submit a pull request.

License

MIT License

Copyright (c) 2023

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

version Française

tinymodalebyrchon - Un composant modal React

Vue d'ensemble

TinyModale est un composant modal React polyvalent avec des animations et des propriétés de style personnalisables. Utilisant styled-components pour le style, il offre une solution flexible pour intégrer des modaux dans les applications React. Ce composant est conçu pour être facilement adaptable à une variété de cas d'utilisation, assurant une intégration transparente et une expérience utilisateur améliorée.

Caractéristiques

• Animations personnalisées : Inclut BumpAnimation et OpacityAnimation pour une présentation dynamique.
• Stylé avec Styled-Components : Offre une grande flexibilité de style.
• Styles conditionnels : Ajuste les styles en fonction des propriétés du composant.
• Contrôle complet des propriétés : Permet une personnalisation détaillée de l'apparence et du comportement.

Installation

Installez TinyModale via npm :

npm install tinymodalebyrchon

Importation

import TinyModale dans votre projet :

import TinyModale from `tinymodalebyrchon`

Exemples

Le composant < TinyModale > offre une personnalisation étendue via ses props. Voici quelques exemples pour illustrer les différentes façons dont il peut être utilisé et personnalisé dans vos projets React. Ces exemples sont destinés à être un point de départ et ne sont pas exhaustifs - n'hésitez pas à explorer et à personnaliser davantage en fonction de vos besoins.

Utilisation de base

Un exemple simple pour montrer l'utilisation de base avec un message personnalisé :

<TinyModale
  
  message="welcome to my site!" // Tout message de chaîne
/>

Personnalisation de l'arrière-plan et des animations

Personnalisez l'arrière-plan et les animations pour s'adapter au style de votre application :

<TinyModale
  showButton={true} // true pour afficher le bouton, false pour le masquer
  message="Notification est!" // Tout message de chaîne
  bgcontainercolor="rgba(0, 0, 0, 0.8)" // Toute valeur de couleur CSS valide
  bgcontaineropacity={0.5} // Tout nombre entre 0 (transparent) et 1 (opaque)
  bgAnimation="fade" // "fade" et bump pour le moment
/>

Personnalisation complète du style

Un exemple plus complexe illustrant une personnalisation complète du style, y compris les couleurs, la typographie et les animations :

<TinyModale
  showButton // true pour afficher le bouton, false pour le masquer
  message="Operation success" // Tout message de chaîne
  bgcontainercolor="blue" // Toute valeur de couleur CSS valide
  bgcontaineropacity={0.7} // Tout nombre entre 0 (transparent) et 1 (opaque)
  textSize="18px" // Toute valeur de taille de police CSS valide
  textFamily="Arial" // Toute valeur de famille de police CSS valide
  modaleBoxColor="white" // Toute valeur de couleur CSS valide
  modaleRadius="15px" // Toute valeur de border-radius CSS valide
  modaleAnimation="bump" // "fade", "bump" pour le moment
  modaleOpacity={0.9} // Tout nombre entre 0 (transparent) et 1 (opaque)
  buttonColor="green" // Toute valeur de couleur CSS valide
  buttonWidth="100px" // Toute valeur de largeur CSS valide
  buttonHeight="50px" // Toute valeur de hauteur CSS valide
  buttonTextContentColor="white" // Toute valeur de couleur CSS valide
  buttonTextSize="20px" // Toute valeur de taille de police CSS valide
  buttonBorder="2px solid black" // Toute valeur de bordure CSS valide
  buttonmodaleRadius="5px" // Toute valeur de border-radius CSS valide
  buttonMargin="10px" // Toute valeur de marge CSS valide
  buttonPadding="5px" // Toute valeur de rembourrage CSS valide
  buttonBgColor="darkblue" // Toute valeur de couleur CSS valide
  buttonCursor="pointer" // Types de curseur CSS comme "pointer", "default", etc.
/>

Ces exemples devraient vous aider à démarrer avec l'intégration et la personnalisation du composant TinyModale dans vos propres projets. Alors expérimentez et trouvez ce qui fonctionne le mieux pour votre application !

Props

Contribuer

Les contributions sont les bienvenues. Pour contribuer, veuillez forker le dépôt, créer une branche, faire vos modifications et soumettre une demande d'extraction.

Licence

Licence MIT

Droits d'auteur (c) 2023

La permission est accordée par la présente, gratuitement, à toute personne obtenant une copie de ce logiciel et des fichiers de documentation associés (le "Logiciel"), de traiter dans le Logiciel sans restriction, y compris sans limitation des droits d'utiliser, de copier, de modifier, de fusionner, de publier, de distribuer, de sous-licencier et/ou de vendre des copies du Logiciel, et de permettre aux personnes auxquelles le Logiciel est fourni de le faire, sous réserve des conditions suivantes :

L'avis de droit d'auteur ci-dessus et le présent avis de permission doivent être inclus dans tous copies ou parties substantielles du Logiciel.

LE LOGICIEL EST FOURNI "TEL QUEL", SANS GARANTIE D'AUCUNE SORTE, EXPRESSE OU IMPLICITE, Y COMPRIS MAIS SANS S'Y LIMITER LES GARANTIES DE QUALITÉ MARCHANDE, D'ADÉQUATION À UN USAGE PARTICULIER ET D'ABSENCE DE CONTREFAÇON. EN AUCUN CAS, LES AUTEURS OU LES TITULAIRES DU DROIT D'AUTEUR NE SERONT RESPONSABLES DE TOUT DOMMAGE, RÉCLAMATION OU AUTRE RESPONSABILITÉ, QUE CE SOIT DANS LE CADRE D'UN CONTRAT, D'UN DÉLIT OU AUTREMENT, DÉCOULANT DE, HORS OU EN RELATION AVEC LE LOGICIEL OU L'UTILISATION OU D'AUTRES TRANSACTIONS DANS LE LOGICIEL.