1 - React Hooks, Context and Reducers
Quite soon, I need to share the user state within different components. If I understood context correctly, this should be one of the few cases.
Context allows me to share state within different components without the need of explicitly passing the props from top to bottom.
React Hooks is a more functional version/style of writing react components.Github
2 - The Box Component
Moving fast sometimes implies to take some shortcuts. I always struggle to decide when should I cheat or do it right. I use a rule of thumb:
If doing it right takes less than twice the time, let's take the shortcut.
The problem comes with the shortcut. A shortcut for me should not compromise maintainability.
Another rule that I try to respect is the rule of three:
Don't abstract until you have three cases where the abstraction is really needed.
So... After writing component dimensions in several files, I wanted to have the structure in one single file and isolate the component from its dimensions. I ended with a simple react component that enables me to design quite fast:
This trick allowed me to save a lot of time, by playing with different options quite fast. For example in the main App.js, I can do something like this:
Now I can pass normal CSS props to the component as normal props. Saving a lot of time by handling all the positioning within the same.
3 - Positioning
One of the things I will need is to map the mouse position or button click to a specific year of the timeline. I could create a grid of divs and each them reporting its select state. But that option, look too expensive. So I needed to read the mouse cursor and correlate back to a year.
Using again react Hooks, I created a small effect that returns the mouse position in a really simple way:View on Github
And that was it for today.
Unicorns in Tech
What do you think. Please share your thoughts at @guillermooo.