useInput

The useInput hook returns the InputDialogComponent component to render the InputDialog and openInputDialog function to open the InputDialogComponent programatically.

Importing the hook

import { useInput } from 'repopup';

Usage

Your Name

Name

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

const App = () => {
    const { InputDialogComponent: InputDialog, openInputDialog } = useInput({
        onSubmitCallback: (val: any) => console.log(val),
        label: 'Name',
        title: 'Your Name'
    });
    return (
        <React.Fragment>
            <Button onClick={() => openInputDialog()}>Open</Button>
            <InputDialog type="text" placeholder="Enter your name..." />
        </React.Fragment>
    );
};

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

Function Signature

function useInput(
  options: UseInputArgs,
): {InputDialogComponent:JSX.Element,openInputDialog: () => 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