https://github.com/minhomega/react-interactive-paycard

An interactive credit card component built with React and TypeScript
https://github.com/minhomega/react-interactive-paycard

credit-card frontend interactive-component nextjs react typescript ui-component

Last synced: about 1 month ago
JSON representation

An interactive credit card component built with React and TypeScript

• Host: GitHub
• URL: https://github.com/minhomega/react-interactive-paycard
• Owner: MinhOmega
• License: mit
• Created: 2024-08-07T11:30:25.000Z (almost 2 years ago)
• Default Branch: main
• Last Pushed: 2024-08-09T10:48:14.000Z (almost 2 years ago)
• Last Synced: 2026-04-27T15:41:35.503Z (about 2 months ago)
• Topics: credit-card, frontend, interactive-component, nextjs, react, typescript, ui-component
• Language: TypeScript
• Homepage: http://minhvo.is-a.dev/react-interactive-paycard/
• Size: 194 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Contributing: .github/CONTRIBUTING.md
  • Funding: .github/funding.yml
  • License: LICENSE
  • Code of conduct: .github/CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

          


  React Interactive Paycard



Inspired by the [vue-interactive-paycard](https://github.com/muhammederdem/vue-interactive-paycard) and [react-interactive-paycard](https://github.com/jasminmif/react-interactive-paycard) projects, I decided to recreate the same functionality in ReactJS, using TypeScript throughout. Additionally, I developed an example website to demonstrate how it works within a NextJS framework.



  

    Live code demo |

    Hire me here

  



## Demo



  



## Notes

- The component is only available in a browser environment. If you are using Next.js App Router or any other framework that utilizes Server Components, make sure to use this component within a Client Component by adding the directive [`use client`](https://react.dev/reference/rsc/use-client).

## Roadmap

- [x] Convert all code to TypeScript

- [x] Create an example website and build the CI/CD pipeline to deploy it to GitHub Pages

- [ ] Refactor the code to use custom props for easier integration

- [ ] Add more card types and a prop to control validation

- [ ] Publish it as an NPM package and build the CI/CD pipeline for NPM publishing

## Contributing

Contributions are welcome! If you have suggestions, bug reports, or feature requests, please open an issue or submit a pull request.

1. Fork the repository

2. Create a new branch (`git checkout -b feature-branch`)

3. Make your changes

4. Commit your changes (`git commit -m 'Add some feature'`)

5. Push to the branch (`git push origin feature-branch`)

6. Open a pull request

## License

This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for more details.

## Contact

For any questions or inquiries, feel free to reach out via [GitHub](https://github.com/minhomega/) or [email](mailto:vnqminh0502@gmail.com).