Skip to main content

TextAreaDialog

TextAreaDialog component represents a multi-line plain-text editing control, useful when you want to allow users to enter a sizeable amount of free-form text, for example a comment on a review or feedback form.

info

This Component is built on top of basic html/JSX <textarea> element and you can pass all the props and attributes which you can pass to basic <textarea> element.

Example​


import { TextAreaDialog , 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>
        <TextAreaDialog
              label="Message"
              onSubmitCallback={submitCallback}
              onClose={() => setOpen(false)}
              open={open}
              placeholder="Write a message...."
        />
  </>
}

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​