https://github.com/mahmoudzakaria90/gls-nxt-fe-task

https://github.com/mahmoudzakaria90/gls-nxt-fe-task

Last synced: about 1 month ago
JSON representation

• Host: GitHub
• URL: https://github.com/mahmoudzakaria90/gls-nxt-fe-task
• Owner: mahmoudZakaria90
• Created: 2024-06-13T23:42:00.000Z (7 months ago)
• Default Branch: master
• Last Pushed: 2024-06-21T18:34:41.000Z (7 months ago)
• Last Synced: 2024-06-22T10:25:33.548Z (7 months ago)
• Language: TypeScript
• Size: 74.2 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# GLS/NXT

## Quick Run

- Run `yarn`;

- For dev localhost, run `yarn dev`.

- For test run `yarn test`.

The modal component was inspired from the standard HTML5 `` element, through here a full documentation via MDN https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog. 


The html5 `` element as per some docs is making `React.portal()` obselete.

It supports `ESC` button for closing the dialog.

## How to use

By ref

```

const showButtonRef = useRef(null);

```

In case no `modalTitle` or `modalBody` are passed a default content will be provided.

Optionally, you can pass `isOpen` prop for showing modal on mounting.

```

const showButtonRef = useRef(null);

```

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh

- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh

## Expanding the ESLint configuration

If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:

- Configure the top-level `parserOptions` property like this:

```js

export default {

  // other rules...

  parserOptions: {

    ecmaVersion: "latest",

    sourceType: "module",

    project: ["./tsconfig.json", "./tsconfig.node.json"],

    tsconfigRootDir: __dirname,

  },

};

```

- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`

- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`

- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list