1.0.0 • Published 3 years ago

@caminkunick/react-popup-box v1.0.0

Weekly downloads
-
License
MIT
Repository
github
Last release
3 years ago

@caminkunick/react-popup-box

Made with create-react-library

NPM JavaScript Style Guide

Install

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

Screenshot

Alert

alert screenshot

Confirm

confirm screenshot

Remove

remove screenshot

Prompt

prompt screenshot

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

PropTypeDescription
titleReactNodeTitle of Dialog
labelReactNodeLabel of Dialog

Confirm

PropTypeDescription
titleReactNodeTitle of Dialog
labelReactNodeLabel of Dialog
onConfirmfunccallback function after confirmSignature:function() => void

Remove

PropTypeDescription
titleReactNodeTitle of Dialog
labelReactNodeLabel of Dialog
onConfirmfunccallback function after confirmSignature:function() => void

Prompt

PropTypeDescription
titleReactNodeTitle of Dialog
labelReactNodeLabel of Dialog
onChangefunccallback function after confirmSignature:function(value:string) => void

License

MIT © caminkunick