medipass / react-payment-inputs

A React Hook & Container to help with payment card input fields.
https://medipass.github.io/react-payment-inputs
381 stars 63 forks source link

Export/Import react-payment-inputs/images (documentation error?) #6

Closed agrohs closed 5 years ago

agrohs commented 5 years ago

Not sure if we're doing something wrong here and/or need to do an additional yarn install, but when trying to use the PaymentInputsWrapper, we are having an issue w/ basic import of the credit card images: import images from 'react-payment-inputs/images';.

It gives us an error of:

Cannot find module: 'react-payment-inputs/images'. Make sure this package is installed.

You can install this package by running: yarn add react-payment-inputs/images.

Looked inside of the installed node_modules directory and see the react-payment-inputs/es (and /lib and /umd) folders - with the /es and /lib ones each containing the subfolder for images but not sure how they are exported in there via rollup such that the images can be imported properly??

Any idea on what we're doing wrong?

Do we need to explicitly import the es6 version? (import images from 'react-payment-inputs/es/images';)

efstathiosntonas commented 5 years ago
import images from 'react-payment-inputs/lib/images';

then

 <PaymentInputsContainer>
                        {({
                          meta,
                          getCardNumberProps,
                          getExpiryDateProps,
                          getCVCProps,
                          getCardImageProps
                        }) => (
                          <div>
                            <svg {...getCardImageProps({ images })} />

@jxom

jxom commented 5 years ago

Should be fixed in 1.0.6