useTextArea

The useTextArea hook returns the TextAreaDialogComponent component to render the TextAreaDialog and openTextAreaDialog function to open the TextAreaDialogComponent programatically.

Importing the hook

import { useTextArea } from 'repopup';

Usage

Message

import React from 'react';
import { useTextArea , RepopupProvider } from 'repopup';
import ReactDOM from 'react-dom';


const App = () => {
    const { TextAreaDialogComponent: TextAreaDialog, openTextAreaDialog } = useTextArea({
        onSubmitCallback: (val: any) => console.log(val),
        label: 'Message'
    });
    return (
        <React.Fragment>
            <Button onClick={() => openTextAreaDialog()}>Open</Button>
            <TextAreaDialog placeholder="Write your message ..." />
        </React.Fragment>
    );
};

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

Function Signature

function useTextArea(
  options: UseTextAreaArgs,
): {TextAreaDialogComponent:JSX.Element,openTextAreaDialog: () => void}

Options

Option	Type	Description	Default
closeOnBackdropClick	boolean	Wheather or not to close the popup on clicking the backdrop	true
title	string	Used for the title of the popup
cancelButtonText	string	Use this to change the text on the "Cancel"-button.	'Cancel'
onSubmitCallback	(value: any) => void;	Function that will be run when the "Submit"-button is clicked
submitButtonText	string	Use this to change the text on the "Submit"-button.	'Submit'
label	string	Used to give a label to the input field