feat: new callback prop (renderComponent) to customize rendering

[andrwo]

Adds a new renderProp to allow user to customize how to render the component.

Description

Adds a new prop to IntlTelInput:

{
  renderComponent? : (wrapperProps, flagDropDownProps, inputProps) => React.ReactNode
}

Currently, the rendering of the component is fixed with a <div> around <FlagDropDown ...> and <input>. If this callback is provided, instead of rendering the fixed default, will call the callback with the relevant props for user to customize their own rendering.

If callback not provided, will use the existing default rendering (<div ...> <FlagDropDown ...> <input ... >), so it does not affect any existing usages.

This allows users to customize using whatever Input component from any UI libraries (bootstrap, Material UI, etc.),. This enables this component to work smoothly with material UI (and other UI libraries) without messing around with the CSS to reproduce the UI's behaviour.

• Also exposed the FlagDropDown component so that it can be used in the rendering.
• Add new prop flagContainerProps to inner component FlagDropDown to allow user to customize the flag container's properties.

Will post CodeSandbox when I figure out how to link the module dependency to my fork...

Example usage (Material UI):

import InputAdornment from "@mui/material/InputAdornment";
import TextField from "@mui/material/TextField";
import IntlTelInput, { FlagDropDown } from "react-intl-tel-input";

<IntlTelInput
    value={phoneNumber}
    fieldName="phone"
    fieldId="phone_id"
    formatOnInit={true}
    autoHideDialCode={false}
    renderComponent={(wrapperProps, flagDropDownProps, inputProps) => {
      flagDropDownProps.flagContainerProps = { style: { position: "relative" } };
          inputProps.inputRef = inputProps.ref;
          inputProps.ref = undefined;
      inputProps.InputProps = {
        startAdornment: (
          <InputAdornment position="start">
            <div {...wrapperProps}>
              <FlagDropDown {...flagDropDownProps} />
            </div>
          </InputAdornment>
        ),
      };
      return (
        <TextField
          variant="filled"
          margin="dense"
          size="small"
          fullWidth
          {...inputProps}
        />
      );
    }}
    onPhoneNumberChange={(v, nn) => setPhoneNumber(nn)}
  />

Example usage (reactstrap (bootstrap React)):

import { Input, InputGroup, InputGroupAddon, InputGroupText } from "reactstrap";
import IntlTelInput, { FlagDropDown } from "react-intl-tel-input";

<IntlTelInput
    value={phoneNumber}
    fieldName="phone"
    fieldId="phone_id"
    formatOnInit={true}
    autoHideDialCode={false}
        renderComponent={(wrapperProps, flagDropDownProps, inputProps) => {
          flagDropDownProps.flagContainerProps = { style: { position: "relative" } };
          inputProps.innerRef = inputProps.ref;
          inputProps.ref = undefined;
          return (
            <InputGroup>
              <InputGroupAddon addonType="prepend">
                <InputGroupText>
                  <div {...wrapperProps}>
                    <FlagDropDown {...flagDropDownProps} />
                  </div>
                </InputGroupText>
              </InputGroupAddon>
              <Input {...inputProps} />
            </InputGroup>
          );
        }}
    onPhoneNumberChange={(v, nn) => setPhoneNumber(nn)}
  />

Screenshots:

Below are actual working implementation of above code:

Material UI:

Reactstrap (Bootstrap React):

Types of changes

• [ ] Bug fix (non-breaking change which fixes an issue)
• [x] New feature (non-breaking change which adds functionality)
• [ ] Breaking change (fix or feature that would cause existing functionality to change)

Checklist:

• [x] I have used ESLint & Prettier to follow the code style of this project.
• [x] I have updated the documentation accordingly.
• [ ] I have added tests to cover my changes.
• [x] All new and existing tests passed.

Closes #391

[andrewsantarin]

UPDATE: I see it's applied. Thank you.

@andrwo Could you insert this to the description? GitHub will automatically close the issue if this gets merged.

Closes #391

[mcataford]

Late to the ball on this one -- I'll read through this in a couple hours to get a proper review in. 🚀