I am struggling with atoms in atomic design. Why would I need to make a component for already estabilished HTML UI element? Isn't it redundant?
Lets say I have a button, in molecule instead of using the <button>Label</button> I would be force to use component <Button myOwnLabel="Label" /> inside which is just rendered the same old button.
I can't see the benefit of making another file. Can you help me see it?
Thank you.
There is nothing wrong with using <button> in React. I use it all the time for some small projects that do not require having complicated components for each element.
The benefit of atomic design orientation in React is to give you a consistent foundation for every element in your app.
For example, in your project, all buttons are blue, and every time someone clicks on them, an event is sent to Google Analytics. Using pure HTML elements, you will declare it as:
<button className="blue" onClick={sendEvent}>Text<button>
If you have 100 buttons, you will have to write this configuration 100 times.
Moreover, one day, you may decide that it is not useful to track clicks anymore, and you need to remove the default onClick event on 100 of them.
Then your designer says, let's change all buttons to orange, and you repeat the whole process again.
That's when using custom element comes in play. You can declare the above code in a separate <Button> component.
const Button = () => <button className="blue" onClick={sendEvent}>Text<button>
It appears as simple as <Button> everywhere else, but the actual content of the <Button> is dynamic. Any update will require you change the code inside the component only. For the above example, to achieve all the change requirements, you only need to change <Button> to
const Button = () => <button className="orange">Text<button>
and it will be reflected in all of its instances.
Hope this helps.
Related
There is a tile (molecule) with an image, some text and a play button. When the button is triggered a video should be shown via a modal. I think a modal should be an organism, but i want the modal to be part of the tile, which is an molecule.
The modal should be part of the tile, because its easier to use it that way.
I dont want always wire them up from inside an other organism, template or view.
Should i make the modal to a moclecule or should i make the tile to an organism?
Any advice?
I know this is an old question, but I recently stumbled on this while trying to figure out basically the same thing and wanted to add my two cents.
Note: I just started learning about atomic design, so this could be completely wrong - Take it for what it is, an opinion.
Brief background
In my case, I have a component (lets call it Form A) which is going to live inside of Modal A. Modal A is a very simple modal which is more of just a dialog modal (basically just contains open/close functionality) but it happens to have a form inside of it in this case.
Since the Modal technically contains a form (molecule) visually, I initially figured this must be considered an organism, or at the very least, another molecule.
My Solution
After thinking on this for a while, and referring to https://atomicdesign.bradfrost.com/chapter-2/ for guidance, in my instance the following sentence made it clear for me. (in my opinion)
These atoms include basic HTML elements like form labels, inputs, buttons, and others that can’t be broken down any further without ceasing to be functional."
In my mind, going by this logic, I can break my modal down all the way to the atomic level...
If I remove the Form A component from the modal content, the modal is still functional (just has no content). To me, this tells me that I should in fact make a general Modal component and label it as an atom.
After I have a Modal atom component, I can simply pass it children to change the content of the modal. This allows me to easily have a Modal A, Modal B, Modal C component which in my opinion would then be an organism since at that point it is implementing the molecules to create a larger component.
Possible Answer?
So, if I were going to try to answer your question while using my own logic:
I would personally create a simple general re-usable modal component as an atom, then I would create an organism, say <PlayVideo /> which has inside of it the
<Modal props={modalSpecificProps}>
<Video />
{any other content to display in the modal}
</Modal>
With <Video /> being a child along with whatever else should be displayed inside the modal.
The only thing I would say I'm still unsure about myself is, can something be an atom, but still technically allow children to be placed in the atom as well?
Anyways, food for thought for anyone else that stumbles across this.
Here is the case: I want to reuse a panel/callout/tooltip to display different content while I really do not want React to render multiple same DOMs. A code sample maybe look like below:
<SingletonTooltip />
<SingletonTooltip />
<SingletonTooltip />
And it will render 3 icons/buttons in the place I declare them but only renders one tooltip DOM when I click one of these icons/buttons.
A workaround I am not really into is:
<TooltipIcon />
<TooltipIcon />
<TooltipIcon />
...
<TooltipContent />
which brings extra effort to use and maintain code.
I have tried to save the instance in the state of component. However, this will make the component disconnected from the property passed by its parent.
Maybe React context will help? Looking forward to your guys suggestion.
Why not make one component that renders all the buttons and then only renders one content element based off which one was clicked? let each button invoke an onClick handler which is given to it as a prop and then use this to render only what you need. if you implemented some global state management solution you could use even allow more elements place content into the content element
This Is more of a "theoretical" question that often buffles me in different situations and use cases, I will give a simple example to demonstrate it.
Let's say I have a list of 10 buttons.
Everrytime I click a button, a floating menu appears on top of the clicked button - there is only one menu visible for any given time.
Let's assume that I can't render this floating menu within the button component and I can only render it in the buttons parent level (meaning that this menu is sibling to those buttons).
I have 2 possible options to do that:
Keep the x,y position of the last clicked button and render the menu in this given position
Render the menu once and using "ref" to directly relocate the menu
On the one hand, the first approach seems more "Reactish". On the other hand, the possible implemention I can think of is pretty ugly (capturing the clicked item position and saving it to state which triggers defender), and further more, I am not so sure about re re rendering the whole container just because I need to move a small piece of it.
The second approach touches the DOM directly using refs. Although possible , doing DOM manipulations sometimes feel bad to me.
Is there a better approach? Which of the 2 makes more sense?
Any suggestion or thoughts will be appreciated!
Thanks
React uses whats called a virtual DOM, which is a representation of the DOM, that sits on top of the real browser DOM. Whenever you update state or a user performs an action the virtual DOM compares and checks the changes with the real DOM and then updates the UI accordingly.
So if certain DOM elements like a are not different between changes it does not get re rendered, only the DOM elements that have changed are re rendered. And if a property on a DOM element is changed, only the property is updated and the DOM element is not re rendered.
<div color="blue" />
to
<div color="red" />
The whole element is not destroyed and re created, only the property is changed.
However if the element in the host tree is different than the entire host tree is destroyed and recreated.
<div />
to
<p>
This is refereed to as reconciliation
https://reactjs.org/docs/reconciliation.html
So using refs is definitely more of a hacky solution since its more of an escape hatch and directly manipulates the DOM.
I would definitely stick with option 1, I think there is an elegant solution to the use case you described, it would involve just adding a click event listener in the componentDidMount and keeping track of the click position that way.
And also its hard to say without code but since your buttons will be the same, they will not be re rendered only the menu will.
Would recommend for further reading
https://overreacted.io/react-as-a-ui-runtime/
I have a scenario where I can't use scrollview or flatlist.
UI is kind of wizard when press next I move user to next screen or previous on back.
In render function I have:
<View style={{flex: 1}}>
<WizardItem data={this.props.currentStep} />
</View>
Component WizardItem has button inside which update this.props.currentStep and when it is updated in reducer it is naturally updated here.
But I need to animate transition like current step goes left and new come from right and vice versa.
As you can see step is completely dynamic so I can't load it in lists as I don't know until user press next button what is next item.
But I need that animation.
Can somebody guide me on how to do this effect or I should stop thinking about it if it is not possible?
UPDATE
Bellow is example of something similar just no rotation simple move left right.
But I can't use views where I have list of items predefined as next and previous step in wizard are dynamic.
enter link description here
If I understand it correctly you want that to transition to a different screen. To do this I suggest you use LayoutAnimation in React Native. LayoutAnimation lets you animate state changes instead of things simply disappearing and appearing. You can save the currentStep in state instead of props and every time the state changes use LayoutAnimation to transition in the way you want.
This article uses layout animation for screen transitions
If changing to state from props is something that you cannot do or don't want to do, you could also detect prop changes in your Wizard and then use Animated to move your layouts around.
It's tricky to suggest a best way without knowing how Wizard is setup or at the least its general layout. If it is possible to share some code for Wizard it would be easier to help you.
My page is composed of hierarchy of classes and many reusable components. Multiple instances of a button component can exist anywhere in the page and on click they fire actions that populate different types of data in a common sidebar list component.
The requirement is to highlight the button that was last clicked to load the data in that sidebar list. Of course, it also means to remove highlighting from the previous button. Since these button can exist in different components, I cannot manage state in one parent component.
I am not able to find a solution in pure React. I don't want to use jQuery rather just stick to React. Note I do use Redux in the app though and would be fine with leveraging Redux state if required.
You should most definitely use Redux. You'll need to create a variable in Redux that gets updated whenever an action takes place that would require you to highlight the button on the page. Then use conditional styling for the button based on that variable.