Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/yamamotok/dialogwall
A React component which provides mechanism for showing custom modal dialogs and spinners. Tiny customizable preset ones are also available. モーダルダイアログとスピナーを表示する仕組みを提供します。カスタマイズ可能なプリセットを同梱します。
https://github.com/yamamotok/dialogwall
custom-dialog dialog modal-dialogs react reactjs spinner typescript
Last synced: 11 days ago
JSON representation
A React component which provides mechanism for showing custom modal dialogs and spinners. Tiny customizable preset ones are also available. モーダルダイアログとスピナーを表示する仕組みを提供します。カスタマイズ可能なプリセットを同梱します。
- Host: GitHub
- URL: https://github.com/yamamotok/dialogwall
- Owner: yamamotok
- Created: 2020-05-27T14:39:37.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2023-01-07T12:19:33.000Z (almost 2 years ago)
- Last Synced: 2024-11-21T05:25:54.468Z (about 1 month ago)
- Topics: custom-dialog, dialog, modal-dialogs, react, reactjs, spinner, typescript
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/dialogwall
- Size: 2.15 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
DialogWall
=============
- A **React** component.
- It provides mechanism to show custom modal dialog and spinner.
- Tiny preset customizable dialog and spinner are available.
- ES Module since v0.3.0.
- [Bootstrap](https://getbootstrap.com/) is a peer dependency. However, in case you only use your customized ones, it is not necessary.
## Installation
```shell
npm install --save dialogwall
```
TypeScript ready. Type definition is included.
## React version
Since this library is using hook, React version must be >= 16.8
## Setup
Place `` HOC.
```typescript jsx
ReactDOM.render(
,
document.getElementById('root')
);
```
## Use Built-in Dialog
Show a simple dialog with white dialog box. For getting good looks,
[Bootstrap](https://getbootstrap.com/) is necessary. (Peer dependency)
```typescript jsx
const Tester: React.FC = (props) => {
const dialog = useDialog();
const onClick: MouseEventHandler = (e) => {
dialog
.builder()
.setMessage('Hello World')
.setPositiveButton('Accept') /* Optional */
.setNegativeButton('Decline') /* Optional */
.setResultCallback((result) => console.log(result)) /* Optional */
.setSpec({ useEscForCancel: true }) /* Optional */
.show();
};
return (
Show dialog
);
};
```
## Use Built-in Spinner
Show a simple loading spinner. This is using a CSS spinner from [Loading.io](https://loading.io/css/).
```typescript jsx
const Tester: React.FC = (props) => {
const dialog = useDialog();
const show: MouseEventHandler = (e) => {
dialog.showSpinner();
};
// Call `dialog.hideSpinner()` to hide it.
return (
Show spinner
);
};
```
## Use Custom Dialog
Show a custom dialog you created.
```typescript jsx
const CustomDialog: DialogComponent = (props) => {
const onClick: MouseEventHandler = (e) => props.close('Liked');
return (
Like
);
};
const Page: React.FC = () => {
const dialog = useDialog();
const onClick: MouseEventHandler = (e) => {
dialog.show({
component: CustomDialog,
onClose: (reason) => console.log(reason),
});
};
return (
Show dialog
);
}
```
## Licence
MIT
© Keisuke Yamamoto 2021