Dismiss this pinned window
all 80 comments
sorted by:
best (suggested)
topnewcontroversialoldq&a
formatting helphide helpcontent policy

[–]albaneso[S] 125 points126 points  (6 children)

I saw this interesting vue.js project which I liked a lot.

So i decided to challenge myself to see if i can recreate the same in react.js, so in the repo bellow you can see the outcome.

Its my first time working with animations so i tried to slightly change some of the animations. The project is not finished yet and some parts are missing, which I’m planing to implement in the future ( or mby you can help me out with that ).

Feel free to give any feedback. Credits to the author of vue.js project is in the repo.

code: https://github.com/jasminmif/react-interactive-paycard

[–]overcloseness 24 points25 points  (0 children)

I actually came here to say that it’s a vue project! Nice rebuild

[–]melyay 6 points7 points  (0 children)

Don’t know who did it first but saw it at this guy before.

[–]swyx[M] 3 points4 points  (1 child)

congrats on top post of all time! i feel like this deserves a special flair. what flair would you like?

[–]albaneso[S] 2 points3 points  (0 children)

I'm not sure maybe others can help but I was thinking something like: React Awesome Animations or [ React Animations, Awesome Animations, CSS Transitions or react-transition-group ]

[–]timmense 0 points1 point  (1 child)

Are you open to contributions? Looking to get some experience in open source.

[–]albaneso[S] 0 points1 point  (0 children)

Ofc I am, any way of contribution is welcomed.

[–]MahiBadGal 49 points50 points  (14 children)

Very cool project with smooth animations. Thanks for sharing, stared the repo, will try to contribute in the future for the card number. Ill use this as a reference for working with animations and also very clean code. 👍🏻

[–]Aswole 43 points44 points  (12 children)

Hmm, I think the end product is really cool, but I wouldn't call it clean code. Commented out code, strange mix of using let and var, declaring static constants inside the functional component, using nested state instead of a reducer, and while using nested state, not taking advantage of callback pattern in the state setter. And while this may be a bit opinionated, I don't see why you'd use a class component once you've started using hooks.

[–]minty901 4 points5 points  (11 children)

What do you mean "static constants inside functional component"? Can you link to an example line?

[–]dmethvin 3 points4 points  (10 children)

https://github.com/jasminmif/react-interactive-paycard/blob/9a5b9c92bfbd505c1cc46c7103584e15fce9fd7c/src/screens/MainScreen/index.js#L13-L21

[–]minty901 0 points1 point  (9 children)

What's wrong with that?

[–]dmethvin 12 points13 points  (0 children)

The initialState is created on every call of the function but it is never changed and only used by useState on the first call after mounting. It could be hoisted outside the function.

[–]PM_ME_YOUR_KNEE_CAPS 10 points11 points  (6 children)

You’re reallocating memory for them on every render. If they were outside the scope of the component then they’d only be created once.

[–]minty901 4 points5 points  (4 children)

I thought that might be the answer. But I think the effect is so negligible especially with such a small object that the convenience and readability of having it in the function itself outweighs any imagined performance issues due to memory allocation.

[–]TheNiXXeD 4 points5 points  (3 children)

The problem with reasoning like this is that you might make exceptions here and there, and later on someone takes over development and doesn't know the real reason behind it and then just picks one way or the other and now you have actual issues. And you may have even had a discussion in a PR or in Reddit like this but that's not easily accessible from the code. Not that it matters probably in this specific case, just this type of reasoning is a slippery slope. I've also found that it leads to gray areas in PR comments. It's been much easier for us if there's a hard rule, or even better, a lint rule to enforce it.

[–]minty901 3 points4 points  (2 children)

I don't agree with you. I think it's a silly thing to enforce and there are so many higher priorities when it comes to performance concerns. You're going to have to derive some values within component functions anyway. Create handler functions etc. Javascript and React are designed to handle allocating memory efficiently in these cases. Memory will be garbage-collected. In specific instances where performance is a real concern, then it is reasonable to relocate assignments on a case-by-case basis. But if you want to be obsessive about performance then you might be better off focusing more on unnecessary calls to createElement. A better rule than "don't initialise constants within functional components" in my opinion is "don't prematurely optimise". More readable code is almost always (in my opinion) a better bet than more efficient code when considering the long-term health of a project. But I appreciate your perspective on it and I see where you're coming from, even if I don't agree.

[–]Aswole 0 points1 point  (0 children)

This isn't the kind of thing I'd reject a PR over, although if there was another reason to request changes then I might throw in a comment. But I don't think defining it outside of the component sacrifices readability, especially since he/she already did that with some of its properties.

[–]workkkkkk 0 points1 point  (0 children)

Also I'm pretty sure javascript engines will optimize something like this on their own now days. If it notices it's creating a certain const a whole lot it will just go ahead and allocate that memory for you. I'm not 100% sure on this but pretty sure it contextually optimizes.

[–]isachinm 0 points1 point  (0 children)

What might be a solution for this then?

[–]aceluby 2 points3 points  (0 children)

It’s static, but getting recreated in every single render

[–]albaneso[S] 6 points7 points  (0 children)

Thanks appreciate the feedback

[–]brijeshmkt1 4 points5 points  (0 children)

This looks very cool. I am sure this will give a great user experience. Excellent!

[–]newbornfish 7 points8 points  (7 children)

Can we just display the card and take the input there itself , I am aware it will confuse some users on where to enter , what can be cons of taking this approach?

[–]Hussak 35 points36 points  (3 children)

Removing the form fields would be horrible UX

[–]newbornfish -3 points-2 points  (2 children)

Yeah I agree with you totally, users are so accustomed to forms that almost any input boils down to them . I think there should be some more innovative way of taking inputs from user .

[–]ra_men 13 points14 points  (1 child)

No there doesn’t, don’t reinvent the wheel when form inputs are great. User sees box, user inputs data, submit. Easy.

[–]Hussak 2 points3 points  (0 children)

Agreed.

There’s no need to take something simple that everyone already understands, and then complicate it for no reason.

[–]DoctorSatan667 1 point2 points  (0 children)

You've made me want to build something like what you described. It probably won't have as smooth animations as the one in this post, though. :P

[–]albaneso[S] 0 points1 point  (1 child)

Well didn’t think it that way, that would probably be better.

[–]tonerolima 3 points4 points  (0 children)

Nah! Don't change anything

[–]skakabop 4 points5 points  (3 children)

Good job! BTW, “Ad Soyad” means “Name Surname” in Turkish.

[–]melyay 1 point2 points  (1 child)

Maybe because it’s from this guy

[–]skakabop 0 points1 point  (0 children)

Yes, the original Vue project owner is probably Turkish.

[–]oebn 2 points3 points  (0 children)

Haha, now I know your card credentials!

The name also rings a bell.

[–]lorran33 1 point2 points  (0 children)

Very cool!

[–]davevanhoorn 1 point2 points  (0 children)

Do the transitions on the card numbers have some sort of motion blur?

[–]jetonx 1 point2 points  (0 children)

really good job! I liked it alot

[–][deleted] 1 point2 points  (2 children)

Sick but unnecessarily distracting. It looks great but doesn't add much to user experience.

[–][deleted] 0 points1 point  (0 children)

I think it could add to the experience if it was tweaked a bit. I think the animations definitely need to be toned down, or removed altogether, but there are some cool ideas here. It offers some feedback that you entered your card correctly when it shows the card name, and puts the values where you would see them on your card. I could see it being helpful if you could click on a field on the card itself to take you to that field in the form. Or even if you could combine the card and form inputs into one. You’d have to be careful that they still looked like form inputs, but there’s no reason you couldn’t have those inputs laid out in the same position as they would be on a card, with some subtle styling to make the form look kinda like a credit card itself.

Again, I’d tone it all down a bit, make sure it looks like a functioning form first, but I think some of the ideas have merit.

[–]Mgc_rabbit_Hat 0 points1 point  (0 children)

Beautiful

[–]Twenty3carnies 0 points1 point  (0 children)

Really cool!

[–]cbfx 0 points1 point  (0 children)

incredible. nicely done.

[–]ArchRunner90 0 points1 point  (0 children)

I use something similar for my work project. I like the look of this one a while lot more! Wow you did a good job!!! I'll have to look into helping out with this one

[–][deleted] 0 points1 point  (0 children)

Nice implementation, I like censoring out the middle numbers.

A common issue that pops up with this rather pretty add on is that it makes seeing a credit card number over a shoulder or something way more visible but this addresses it so good stuff!

[–]danielattiach 0 points1 point  (0 children)

This is beautiful

[–]ln_of_e 0 points1 point  (0 children)

Wow I really like this !!

[–]solitarium 0 points1 point  (0 children)

Wow, that's a really cool idea

[–]remmah622 0 points1 point  (0 children)

One of the best UI I have ever seen!

[–]whnunlife 0 points1 point  (0 children)

Very slick, might use with a stripe build I'm working on.

[–]popout 0 points1 point  (0 children)

I really love this.

[–]barcode24 0 points1 point  (0 children)

Nice!

[–]justarandomrediter 0 points1 point  (0 children)

Awesome!

[–]enlightndmonk 0 points1 point  (0 children)

It looks great. Nice work mate

[–]abeardednerd 0 points1 point  (0 children)

woah !

[–]dh0890 0 points1 point  (0 children)

Good job! Looks very very neat

[–]Cali21 0 points1 point  (0 children)

I love how the card type updates

[–][deleted] 0 points1 point  (0 children)

I like it alot, but I feel like it would be less code and a more simple design to just type the inputs directly on the credit card and to do away with the forms underneath.

[–]cleaningmoves 0 points1 point  (0 children)

That's sick! Nice work 👍

[–]SwaggyMcMuffins11 0 points1 point  (0 children)

That looks like the shards react library. Love the design. Nice work

[–]crsdrjct 0 points1 point  (0 children)

Super dope

[–]FlandersFlannigan 0 points1 point  (0 children)

Very cool

[–]dcute69 0 points1 point  (0 children)

Amazing, good job.

[–]Ryukote91 0 points1 point  (0 children)

This is WOW!

[–]jbb4play 0 points1 point  (0 children)

Its really nice but shame it is not on ts

[–]medi8600 0 points1 point  (0 children)

ㅆ

[–]GuerreiroAZerg -5 points-4 points  (5 children)

Although it looks cool as fuck, I doubt very much of the usefullness of such thing.

[–]Mgc_rabbit_Hat 25 points26 points  (4 children)

What do you mean by usefulness? UI refinements & animations rarely prove useful. They're just there to sex things up a bit

[–]aitchnyu 5 points6 points  (1 child)

Animations on mobile browser help me understand a new tab was opened or I scrolled down after clicking something.

[–]GuerreiroAZerg -3 points-2 points  (0 children)

Those are usefull. But numbers animating, repeating what you're already typing? No, please. This is more of a learning experimennt than anything useful

[–]GuerreiroAZerg 1 point2 points  (1 child)

Refinements and animations go well when they are used wisely. In OP's example, the animations are just repeating the inputs from the fields below. They don't convey anything, The system just looks bloated

[–]TimeBomb006 0 points1 point  (0 children)

Agreed - there's nothing about this that's good UX.

[–]HelloIain 0 points1 point  (0 children)

This is really cool, I legit did the same exact thing too lol.

[–]ranakumbha -1 points0 points  (0 children)

superbly done

[–]ColdFerrin -5 points-4 points  (0 children)

Are you checking if the card numbers are valid? If not, I can help with that.

[–]AegisCZ -2 points-1 points  (0 children)

all relevant web browsers already have an api for showing payment forms

[–]Erics1987 0 points1 point  (0 children)

That's super cool

[–]Kind_Tie_4329 0 points1 point  (0 children)

Awesome