@caminkunick/react-popup-box

Made with create-react-library

Install

npm install --save @caminkunick/react-popup-box

Screenshot

Alert

Confirm

Remove

Prompt

Usage

// index.tsx

...

import { PopupProvider } from '@caminkunick/react-popup-box'

ReactDOM.render(
  <PopupProvider>
    <App />
  </PopupProvider>,
  document.getElementById('root')
)

...

// App.tsx

import React from 'react'

import { usePopup } from '@caminkunick/react-popup-box'
import '@caminkunick/react-popup-box/dist/index.css'
import { Button, Container, Stack } from '@mui/material'

const App = () => {
  const { Alerts } = usePopup()

  const handleAlert = () => {
    Alerts.alert(
      'Alert',
      'alert label'
    );
  }
  const handleConfirm = () => {
    Alerts.confirm(
      'Confirm',
      'confirm label',
      () => console.log('confirm!')
    );
  }
  const handleRemove = () => {
    Alerts.remove(
      'Remove',
      'remove label',
      () => console.log('remove!')
    );
  }
  const handlePrompt = () => {
    Alerts.prompt(
      'Prompt',
      'prompt label',
      (value) => console.log(value),
      'default prompt'
    )
  }

  return (
    <Container maxWidth='xs' sx={{ py: 6 }}>
      <Stack spacing={1}>
        <Button variant='outlined' onClick={handleAlert}>
          Alert
        </Button>
        <Button variant='outlined' onClick={handleConfirm}>
          Confirm
        </Button>
        <Button variant='outlined' onClick={handleRemove}>
          Remove
        </Button>
        <Button variant='outlined' onClick={handlePrompt}>
          Prompt
        </Button>
      </Stack>
    </Container>
  )
}

export default App

Propties

Alert

| Prop | Type | Description | | -- | -- | -- | | title | ReactNode | Title of Dialog | | label | ReactNode | Label of Dialog |

Confirm

| Prop | Type | Description | | -- | -- | -- | | title | ReactNode | Title of Dialog | | label | ReactNode | Label of Dialog | | onConfirm | func | callback function after confirmSignature:function() => void |

Remove

| Prop | Type | Description | | -- | -- | -- | | title | ReactNode | Title of Dialog | | label | ReactNode | Label of Dialog | | onConfirm | func | callback function after confirmSignature:function() => void |

Prompt

| Prop | Type | Description | | -- | -- | -- | | title | ReactNode | Title of Dialog | | label | ReactNode | Label of Dialog | | onChange | func | callback function after confirmSignature:function(value:string) => void |

License

MIT © caminkunick