React Interactive Paycard

Inspired by the vue-interactive-paycard and 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.

Roadmap

• Convert all code to TypeScript
• 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 file for more details.

Contact

For any questions or inquiries, feel free to reach out via GitHub or email.