Say I have 2 components. Component A renders an input that scales dynamically to its text. Component B renders an input with autocomplete capabilities. Is there a standard way to combine the 2 so that I can have a component that renders an input with autocomplete capabilities and that scales dynamically? One pattern is to wrap one component with the other, so that A renders B. But in the case that the components are a black box, like imported from a node module, this wouldn't be possible right?
You should look into Mixins. Create a single Input component, and create an "Autocomplete" and "scale" mixins. More on the subject here.
Related
Here is the UI of a React app I am working on:
Currently UI is made as a single giant layout.
I want to break each step to be its separate component. As you can see each component would have somewhat different layout.
Now I want to make is such that we would get numbering "Step 1:", "Step 2:" algorithmically (currently those are hardcoded strings).
I was thinking about using high-order components for this purpose, but wasn't sure if I would require them to share context or something to get the numeration correct.
Any ideas how such thing could be achieved?
Again, I will provide the layout as a separate component, step caption as a string, but the part Step #: should be added during render.
I am building a Date Picker component using Preact. So far, I have managed to get animations right and completed event handling. The component has interactions as shown in the following image:
The component itself is split into many smaller components where each component has some notion of its local state:
Calendar - Top level component managing state and animation/transitions between views
CenturyView - Renders list of years
YearView - Renders list of months of a given year
MonthView - Day picker that basically renders days of a given month.
This Calendar can be used as a standalone inline-widget in a page or can be used in picker/dropdown like style as shown below. Next task is to build keyboard accessibility for the component. And, that has been leading nowhere. Focus management quickly becomes mess.
Since React Component or component system is about segregating State from UI or more about making UI = Function(State), what is the best way to manage Focus related state? By its very nature, focus in imperative operation and often handled using useRef and useImperativeHandle but these primitives are not enough to make keyboard accessibility easily possible in such complex scenarios.
So the questions are:
What is the best way to handle Focus state?
How to transition focus between different DOM elements of sibling components (MonthView to YearView or vice-a-versa)?
What is the best way to change focus between different DOM elements using keyboard arrow keys?
I am new to react & I am using material-ui and I want to design a custom autocomplete in React where once data is selected from dropdown it appears as a chip in the text input. I am using the onNewRequest property of material-ui autocomplete but I am not sure how to render a chip component inside it.
Can someone guide me how to do it properly? I want to design recipients like layout found in gmail. I know there are npm packages available but I need to design it purely from material-ui so please guide with a proper approach
Thanks
The question is very broad but I'll try to at least point you in the right direction.
You don't need to render the chips inside the autocomplete, create a a new reusable component. The parent component will contain both the autocomplete and the chips. This will contain all the state. It has two child components:
The first child is always going to be the autocomplete, modify the material-ui styles to make it transparent and without an underline/borders. Whenever an element is selected, send an event to the parent to add the element to the chips array in the parent state.
The second child is the array of chips. This is only a presentational component, receives an array of chips, and the chips might contain another prop event to remove the chip.
I'm hacking with React/Redux and have been building lots of container and components.
However I recently encountered a design choice I made that made on of my Elements look like this:
My question is is this design OK? Basically I am struggling how to pass the Redux Actions down to the Button, since the button is a few levels deep. I could keep passing the actions down component to component from the HeaderContainer, but if the DOM got deeper it would just get worse and worse.
I feel like this design is WRONG since a presentational component is calling a container component.
Any thoughts?
You have three options:
First is to directly connect the button component to the store and let it be both container & presentational component. Simple and effective.
export default connect(mapStateToProps, mapDispatchToProps)(ButtonComponent)
See an example from the creator of Redux here (the 4th post)
Second is to create a container to wrap the button and let the button be only presentational - your current implementation. Very good layered architecture, but overengineered at this point for me.
Third is to pass the action down from the HeaderComponentContainer to the ButtonComponent.
I would go for the third one if the button is no more than 2 levels deep, since you already connected your HeaderComponentContainer and as a parent it is its responsibility to determine what functionality its children should provide (they only present, right?).
PS. You can use React's context to pass actions / properties arbitraly deep in the hierarchy without explicitely doing it for each component.
What is a main difference between a plugin and a component in extjs ?
When should I implement and use some behavior as a class and when as a plugin ?
Well that is more a conceptional question than related to any programming issue. But it can be answered in two sentences:
A Plugin modifies or extend the behavior of a component at creation time without the need to extend the whole class
Plugins can be mixed, meaning a component can include many plugins which allow you to instantiate many component instances where each may have different behavior but all uses the same component class
Like #A1rPun mentioned
Plugins allow us to create reusable code that will modify or add to a
component's look and behavior during or after its instantiation.
Components in ExtJS provide basic, required functionality. There are
many components readily available like text box, combobox, grid,
tree, panel, etc.
Components can be used without using plugins also.
Plugins add more functionality and/or look n feel to existing
components. For example, ExtJS has grid component into which we
can plug-in "drag and drop" plugin. Grid component can be used
without drag and drop also.
Plugins cannot be used independently without using Components.