Skip to main content

InputDialog

Input Dialogs let users enter and edit text.

info

This Component is built on top of basic HTMLInputElement input and you can pass all the props and attributes which you can pass to basic input element.

Example​

Your name


import { InputDialog , RepopupProvider } from 'repopup';
import  { useState } from 'react';
import ReactDOM from 'react-dom';

export function App() {
  const [open,setOpen] = useState(false)

  const submitCallback = (value) => {
    console.log(value)
  }
  
  return <>
        <Button onClick={() => setOpen(true)}>Open Input</Button>
        <InputDialog
          label="Name"
          onSubmitCallback={submitCallback}
          onClose={() => setOpen(false)}
          open={open}
          title={`Your name`}
          type="text"
          placeholder="Enter your name"
        />
  </>
}

ReactDOM.render(
   <RepopupProvider>
    <App />
</RepopupProvider>, 
,document.querySelector('#app'));

onSubmitCallback​

note

Here onSubmitCallback is very important prop which will have the value of this Input Dialog field as a parameter. So with help of this you will be able to access this value and do further process.


  const submitCallback = (value) => {
    console.log(value)
  }

API​