https://github.com/aspedm/vkui-no-connection-modal

Simple UI component for show network status. Component based on VKUI and designed for vk mini apps.
https://github.com/aspedm/vkui-no-connection-modal

react ui-components vk vk-mini-apps vkontakte vkui

Last synced: about 2 months ago
JSON representation

Simple UI component for show network status. Component based on VKUI and designed for vk mini apps.

• Host: GitHub
• URL: https://github.com/aspedm/vkui-no-connection-modal
• Owner: Aspedm
• Created: 2019-11-05T13:10:28.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2024-05-02T01:33:23.000Z (8 months ago)
• Last Synced: 2024-10-16T19:18:33.550Z (2 months ago)
• Topics: react, ui-components, vk, vk-mini-apps, vkontakte, vkui
• Language: TypeScript
• Size: 5.76 MB
• Stars: 5
• Watchers: 2
• Forks: 0
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md

Awesome Lists containing this project

README

        
 


    

    
VKUI NO INTERNET MODAL

    


        Simple UI component for show network status. Component based on VKUI and designed for vk mini apps.

    





    



## Features

 - Supported all VKUI themes

 - Auto close modal when user online

 - Check connect when user try close modal

## Install

```sh

yarn add vkui-no-connection-modal

```

## Example

```javascript

import NoConnectionModal from 'vkui-no-connection-modal';

import useConnection from 'vkui-no-connection-modal/lib/useConnection';

const YourView = () => {

    const [modal, setModal] = useState(null);

    const isOnline = useConnection();

    useEffect(() => {

		if (!isOnline) return setModal(

			 setModal(null)}

			/>

		);

		return setModal(null);

	}, [isOnline]);

    return (

        

            

                

                    Your view

                

            

        

    );

};

```

## Options

You can passed options for component:

| Name          | Type     | Description | Default |

|---------------|----------|-------------|---------|

|`header`       | string   | Modal title | 'No internet'|

|`subHeader`    | string   | Modal description  | 'Checking the network cables, modem and router.' |

|`actionText`   | string   | Button text | 'Try again' |

|`onClose`      | function | Close modal function | **Required** |

## Demo

Start storybook

```sh

yarn start

```

## Contributing

Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are **greatly appreciated**.

1. Fork the Project

2. Create your Feature Branch (`git checkout -b feature/featureName`)

3. Commit your Changes (`git commit -m 'Add some featureName'`)

4. Push to the Branch (`git push origin feature/featureName`)

5. Open a Pull Request

## Credits

A big thanks to:

- [VKUI](https://github.com/VKCOM/VKUI) - Component based on VKUI