Nice work!!.
Side comment: I was expecting some sort of a 'marketplace' to emerge for react components. I am surprised by so few reusable react components.
Show HN: A React.js yearly calendar component
41–49 of 49 posts
Re: Show HN: A React.js yearly calendar component
#42Earlier quoted context omitted.
Any idea on how one could optimize the rendering function to reduce this lag (which BTW I can barely see on my 2015 MBP)?
One common optimization is to strategically use shouldComponentUpdate to limit the number of components that render each time the state changes. In this case you could create a Month component which renders a single element. This component would then implement shouldComponentUpdate to check if the state used to render that month has changed. If not, shouldComponentUpdate returns false and the month does not re-render…
Great! thanks for the explanation and the docs!
Re: Show HN: A React.js yearly calendar component
#43Earlier quoted context omitted.
You definitely won't use this for date selection, but we found it useful to layout the whole year and to review it at a glance. Thanks for your kind words anyway! :)
I liked the layout. The main take away for me was the in Red. It may be a trivial feature,but with so many widgets pounding my eye, it was nice to zoom in to todays date. I can see master planners (in inventory world) sticking with this layout, though I am sure you guys must have already done your market research.
No market research here, TBH!
It is a component extracted from a project we did with our agency Belka, but we'd love if people start using it in other projects!
Re: Show HN: A React.js yearly calendar component
#44Nice work!!. Side comment: I was expecting some sort of a 'marketplace' to emerge for react components. I am surprised by so few reusable react components.
check out http://react-components.com, they have a nice collection there!
Re: Show HN: A React.js yearly calendar component
#45You might consider some people won't be able to use this calendar as-is; it isn't accessible. Consider http://www.456bereastreet.com/archive/201302/making_elements... and perhaps change the spans to native HTML elements with visual and keyboard focus. Thanks for sharing!
Re: Show HN: A React.js yearly calendar component
#46Nice work!!. Side comment: I was expecting some sort of a 'marketplace' to emerge for react components. I am surprised by so few reusable react components.
check out http://react-components.com , they have a nice collection there!
Also: https://react.parts/
Re: Show HN: A React.js yearly calendar component
#47I'm confused.
1. This is a fork from Hanse Kristian, who doesn't appear to work for your company. That is, it doesn't look like BelkaLab did anything but change package.json to name itself as the author.
2. It's a bit confusing why you put the generated demo.js file as part of the repository and have npm (.npmignore) ignore the src files. Is there something special about this demo.js file instead of it being browserify output?
Re: Show HN: A React.js yearly calendar component
#48100 ms delay on every click (measured in Chrome's Profiles tab). I'm on a 2013 MBP. Seems a bit too much for making a number bold.
Any idea on how one could optimize the rendering function to reduce this lag (which BTW I can barely see on my 2015 MBP)?
Delay is 50ms on my MBP. Here is a profile: http://i.imgur.com/ty11Utl.png
With the main bottleneck being here: https://github.com/BelkaLab/react-yearly-calendar/blob/maste...
Implementing a good shouldComponentUpdate() should fix it.
Re: Show HN: A React.js yearly calendar component
#49You might consider some people won't be able to use this calendar as-is; it isn't accessible. Consider http://www.456bereastreet.com/archive/201302/making_elements... and perhaps change the spans to native HTML elements with visual and keyboard focus. Thanks for sharing!
Thanks for the suggestion! will surely look into making it more accessible!