0.2.0 • Published 1 year ago

modal_react_tailwind_responsive v0.2.0

Weekly downloads
-
License
ISC
Repository
-
Last release
1 year ago

Modal

A modal made for npm, built using Javascript, React (components) and tailwindcss (style);

Installation

npm i modal_react_tailwind_responsive

Technologies

React : 18.2.0 version; Node.js : 19.8.1 version; Tailwind CSS : 3.0.2 version;

Getting Started

Dependencies

React Tailwind CSS

How to use

React

npm start to start React

Tailwind CSS

tailwind.config.js- you will find all of the Tailwind settings, an essential file;

./src/App.js

In the App file the Home component is imported where all the other components of the modal are present;

function App() {
  return (
    <>
    <Home/>
    </>
  );
}

./src/components/Home

home

  • In the home file you will find the functions to open and close the modal

  • The component of the buttons and the modal

Home style

To facilitate the styling with tailwind all colors, fonts, and font sizes were removed, so that when it comes time to use the library it is flexible;

To add styles follow the Tailwind link and customize as you like: https://tailwindcss.com/

Home

./src/components/Button

button

Button style

To change the text of the button that open the modal go to ./src/components/Home

To change the button text inside the modal go to ./src/components/Modal

./src/components/Modal

modal

Under ./src/components/Modal are all the functions, styles and text from within the modal;

Modal

This modal is completely responsive

HomeResponsive ModalOpenResponsive

npm library link : https://www.npmjs.com/package/modal_react_tailwind_responsive