arunghosh / react-pin-input

React PIN / OTP input component
MIT License
106 stars 44 forks source link

PinInput cannot be used as JSX element #199

Open brunobouwman opened 2 years ago

brunobouwman commented 2 years ago

Everytime I add a new package I get this error regarding the PinInput module. Anyone has got a clue about what could be happening?

arunghosh commented 2 years ago

@brunobouwman Sorry for the delayed response. Can you provide more details on the React version and whether you are using Typescript?

marklai1998 commented 2 years ago

@arunghosh I'm also running into this problem when I re-export a themed PinInput in my private package It throws an error saying the type is invalid

image

My bundle

import ReactPinInput from 'react-pin-input';

const MyComp = ()=>{
// my component code
return /* @__PURE__ */ React.createElement(Wrapper$2, {
    currentIndex,
    hasError: error
  }, /* @__PURE__ */ React.createElement(ReactPinInput, {
    type: "numeric",
    length: 4,
    inputMode: "number",
    inputStyle: {
      width: "52px",
      height: "52px",
      borderRadius: "2px",
      margin: "0 16px 0 0",
      fontSize: "36px",
      lineHeight: "40px",
      textAlign: "center",
      border: `1px solid ${error ? theme.colors.errorColor : theme.colors.inputBorderColor}`
    },
    inputFocusStyle: {
      border: `1px solid ${error ? theme.colors.errorColor : theme.colors.activeColor}`
    },
    disabled,
    onChange: setCurrentValue,
    onComplete,
    initialValue: value,
    ref: inputRef,
    focus: true
  }));
}