We Keep Coding

How to add extra style properties to the existing ones of a defined component using Component Composition?

I came across the Component Composition Design Pattern in React, which is said by the tutor to be analogue to inheritance in OOP.
My question is, if I want to extend the defined props of the Button, how do you do this?!
SIDE NOTE: I know you would do this with CSS in the first place, but I
ran outta ideas to customize the tutor's example.
In the second code snippet I tried adding both, borderColor: "blue" and color="red" to the style attribute of the BigSuccessButton to try different approaches of appending stuff.
But with the style attribute the entire content defined in the Button Component will be killed. So I will only see blue borders.
So I thought of adding a new prop and using it.
But if last mentioned is the way to do this, how can I append this thing?
Those are the Composition Components, with Button being the Super Class:
export const Button = ({ size, bgColor, text, ...props }) => {
console.log(props);
return (
<button
style={{
padding: size === "large" ? "32px" : "8px",
fontSize: size === "large" ? "32px" : "16px",
backgroundColor: bgColor,
}}
{...props}
>
{text}
</button>
);
};
export const DangerButton = (props) => {
return <Button {...props} bgColor="red" />;
};
export const BigSuccessButton = (props) => {
return (
<Button
{...props}
size="large"
bgColor="green"
/>
);
};
Here I wanna add text color to BigSuccessButton:
import { BigSuccessButton, DangerButton } from "./Composition";
function App_FuncProg() {
return (
<>
{/* <RecursiveComponent data={nestedObject} /> */}
<DangerButton text="Danger" />
<BigSuccessButton text="Yippieh!" style={{borderColor: "blue"}} color="red" />
</>
);
}
export default App_FuncProg;

You've kind of mixed two patterns -- passing props and mapping them into styles; and trying to override the style prop. Passing props probably isnt the way because you dont want to end up having to map new props to the style object every single time you want to customize a new property (though design system libraries like Chakra do do this internally, but its comprehensive and you don't want to reinvent the whole wheel here).
That said, your mapping of size is more acceptable because it actually has semantic meaning, it actually does something (picking the pixel size of fontSize and padding). So I kept that part.
What you really want here I think is to add support for merging the style prop.
This sort of "pass through" approach gives you a high degree of flexibility at low cost by exposing the entire style CSS api to the parents; whilst at the same time, retaining the default styling. The downside is its maybe a little more ugly. Sometimes, if you want more control, you'd go purely with the mapping approach and add specific support via dev-defined props for the things you want exposed. Like you did with the size prop. It really depends on what you want your component API to look like.
A smaller thing: you really want to spread the props after the default ones if you want them to be overridable. The order matters.
export const Button = ({ text, size, style, ...props }) => {
console.log(props);
return (
<button
style={{
padding: size === "large" ? "32px" : "8px",
fontSize: size === "large" ? "32px" : "16px",
...style,
}}
{...props}
>
{text}
</button>
);
};
export const DangerButton = ({style, ...props}) => {
return <Button style={{backgroundColor: 'red', ...style}} {...props}/>;
};
export const BigSuccessButton = ({style, ...props}) => {
return (
<Button
size="large"
style={{backgroundColor: 'green', ...style}}
{...props}
/>
);
};
import { BigSuccessButton, DangerButton } from "./Composition";
function App_FuncProg() {
return (
<>
{/* <RecursiveComponent data={nestedObject} /> */}
<DangerButton text="Danger" />
<BigSuccessButton text="Yippieh!" style={{borderColor: "blue", color: 'red'}} />
</>
);
}
export default App_FuncProg;
An example of the opposing "first class props styling api" approach is Chakras api: https://chakra-ui.com/docs/styled-system/style-props. But again, this is obviously a very complete third party library and theyve spent a lot of time making this nice to use and expose every single option.
SIDE NOTE: I know you would do this with CSS in the first place, but I ran outta ideas to customize the tutor's example.
To be honest, in react, you don't usually go with separate CSS files like this. "CSS-in-JS" is now the norm. So inline styling like this is actually quite normal and not frowned on. There's whole libraries built around the philosophy (not necessarily using style attribute, but embedding the CSS in the component -- these things are complex and inject CSS into the DOM and then dynamically create class attributes). Have a look at styled-components and emotion. And Chakra etc has their own baked in based on things like emotion also.

Lifting State Up or how to get the value in another component without import

I have a lot of components I need to get a value called "values" from the SideBarBlurChange component to the SideBar component. I drew a diagram of my components so you can navigate easier
I read articles and how I understood there are two main options, the first is "Lifting State Up" and the second is "Redux" or "Context". I tried to apply these approaches but I failed.
The main problem is that inside the SideBarBlurChange component, I cannot import anything, since my entire project is collapsing. In addition to all this, I will leave a link to this project in the github if you want to see GitHub Project
Now I want to explain my problem in more detail.
Please pay attention to the changing number I showed with the mouse this number and there is a value with the name "values". I need to apply this value to the SideBar component to adjust the blur of the Sidebar.
And finally, before I demonstrate my code, I imported the SideBar inside the SideBarBlurChange, took out a value called "values" and applied it to the SideBar component like this <div style = {{backdropFilter: blur(${props.values}px)}}...
Now look my project has collapsed, I mean that there is a catastrophe for my components, but I got "values" and everything works for me.
Now I think that the problem is understandable, in order not to confuse you, I will show you three SideBar components, SideBarBlurChange and DraggableDialog where I imported SideBarBlurChange, + delete all personal code and show only the most important thing, but if you need to look at all the other components, I will remind you that I left a link to project in github, or as a last resort, tell me I will edit my question and show what you need in advance. I want to thank you for taking the time to solve my problem
SideBar.jsx
export default function SideBar(props) {
return (
<div style={{backdropFilter: "blur(60px)"}}>
// jsx code
</div>
);
}
SideBarBlurChange.jsx
const MIN = 0;
const MAX = 100;
export default function SideBarBlurChange(props) {
const ls = parseInt(window.localStorage.getItem('values'));
const [values, SetValues] = useState(ls ? [ls] : [20]);
const SaveChanges = () => {
localStorage.setItem('values', values);
}
return (
<>
<div>
<Range
// code
/>
<output style={{ marginTop: "30px" }} id="output">
{values[0].toFixed(1)}
</output>
<button onClick={() => SaveChanges()}>Save</button>
</div>
</>
);
}
DraggableDialog.jsx
const DraggableDialog = (props) => {
return (
<>
<div>
<SideBarBlurChange {...props}/>
</div>
</>
);
};
export default DraggableDialog;
I removed a lot of code from these three components, I left only the most important. Sorry in advance, I don't know English, I wrote it all with the help of translate

How can I use React Material UI's transition components to animate adding an item to a list?

I have this class.
class Demo extends React.Component {
constructor(props) {
super(props);
this.state = {
items: []
};
this.add = this.add.bind(this);
this.clear = this.clear.bind(this);
}
add() {
this.setState(prev => {
const n = prev.items.length;
return {
items: [<li key={n}>Hello, World {n}!</li>, ...prev.items]
};
});
}
clear() {
this.setState({ items: [] });
}
render() {
return (
<div>
<div>
<button onClick={this.add}>Add</button>
<button onClick={this.clear}>Clear</button>
</div>
{/* This is wrong, not sure what to do though... */}
<Collapse in={this.state.items.length > 0}>
<ul>{this.state.items}</ul>
</Collapse>
</div>
);
}
}
Sandbox link: https://codesandbox.io/s/material-demo-ggv04?file=/Demo.js
I'm trying to make it so that every time I click the "add" button, a new item gets animated into existence at the top of the list and the existing items get pushed down. Not sure how to proceed though.
Extra Resources
Example of what I'm trying to achieve: https://codeburst.io/yet-another-to-do-list-app-this-time-with-react-transition-group-7d2d1cdf37fd
React Transition Group Transition docs: http://reactcommunity.org/react-transition-group/transition (which seem to be used internally by Collapse)

I updated your Sandbox code to achieve what you wanted, but I don't think MaterialUI is the best library for that (I could be missing a better way to do it).
The challenge is that when you add a new item, that doesn't exist in the DOM yet. And most of those animation libraries/components require the element to be in the DOM and they just "hide" and "show" it with a transition time.
I had a similar situation and after some research, the better library I found that can handle animation for elements that are not yet in the DOM, was the Framer Motion. (You can check their documentation for mount animations)
Anyway, here is the link for the new Code Sandbox so you can take a look. The changes I made:
Removed random key
In the map function that creates your list using the <Collapse /> component, there was a function to get a random integer and assign that as a key to your component. React needs to have consistent keys to properly do its pretenders, so removing that random number fixes the issue where your "Toggle" button wasn't animating properly. (If your list of items doesn't have an unique ID, just use the index of the map function, which is not a good solution, but still better than random numbers).
<Collapse key={i} timeout={this.state.collapseTimeout} in={this.state.open}>
{it}
</Collapse>
Added a new function to control the toggle
The approach here was: add the item in your list and, after the element is in the DOM, close the <Collapse />, wait a little bit and open it again (so you can visually see the animation). In order to do that, we needed a new "toggle" function that can explicit set the value of the collapse.
toggleValue(value) {
this.setState(() => {
return {
open: value
};
});
}
Added a variable timeout for the collapse
The last issue was that, closing the <Collapse /> when the new item is added, was triggering the animation to close it. The solution here was to dynamically change the timeout of the collapse, so you don't see that.
setCollapseTimeout(value) {
this.setState(() => {
return {
collapseTimeout: value
};
});
}
When adding the element to the list, wait to trigger the animation
Again, to work around the issue with elements not yet in the DOM, we need to use a setTimeout or something to wait to toggle the <Collapse />. That was added in your add() function.
add() {
this.toggleValue(false);
this.setCollapseTimeout(0);
this.setState(prev => {
const n = prev.items.length;
return {
items: [<li key={n}>Hello, World {n}!</li>, ...prev.items]
};
});
setTimeout(() => {
this.setCollapseTimeout(300);
this.toggleValue(true);
}, 100);
}
Again, this is a hacky solution to make <Collapse /> from MaterialUI work with elements that are not yet in the DOM. But, as mentioned, there are other libraries better for that.
Good luck :)

Ended up here earlier on and then came back to create a sandbox showing hopefully a simple method for this scenario. The material-ui docs are a bit (lot) light in this area and I was fighting with a very similar situation, but I tried something with TransitionGroup from react-transition-group, crossed my fingers and it seemed to work.
Forked CodeSandbox with TransitionGroup
The gist is that you
wrap all of the components you want to transition in the <TransitionGroup> component
Inside the TransitionGroup, put in the "condition" (logic or loop output) for the data you want to render
Wrap the individual components you want to transition with transition component of your choice - <Collapse> in this example
e.g. In its most simple setup where "items" is an array of unique numbers coming from either props, state or a redux store
<TransitionGroup>
{items.map(item => (
<Collapse key={item}>
I am item {item}
</Collapse>
))}
</TransitionGroup>
With this setup I have found that I didn't need to put any props on the TransitionGroup or Collapse, and the TransitionGroup handled all the mounting and unmounting in the loop rendering. Material UI doesn't produce the lightest of HTML output, but I guess it's all rendered on the fly so maybe that makes it better (unless you have thousands of elements, then things start to drag).
You can even go a step further and wrap the whole thing in another TransitionGroup to cover situations where you want to remove the whole thing without transitioning all of the individual items - in this instance I switched it to a <Slide>. I was absolutely certain that this wouldn't work, but it seemed to not care. You can also try and be semantic and use the "component" property rather than wrapping in another element e.g.
{items.length > 0 && (
<TransitionGroup>
<Slide>
<TransitionGroup component="ul">
{items.map((item) => (
<Collapse component="li" key={item}>I am item {item}</Collapse>
))}
</TransitionGroup>
</Slide>
</TransitionGroup>
)}
I have changed the sandbox in the following ways
Included TransitionGroup from react-transition-group
Changed the "add" logic so that the components aren't part of the "items" array - the array only contains the data required to render the components
I have added a simple "count" and pushed that to the array to give the items a unique index (had originally used Math.random, but I wanted a "prettier" output). Generally your items will probably be coming from a database somewhere where a unique id will already be set.
Rendered the components in a loop based on the data in the array (this could be done in a separate function, but the gist is that the components aren't being stored in the array)
added a "delete" function to show the removal of single items
wrapped the whole group in a second <TransitionGroup> to show that the unmounting can happen in a group level
Put in some simple styling to get a better idea of the effect. You could use Material UI components here, but just wanted to keep it simple.
Hope this helps someone in the future.

draft.js: making editor content multipage

I have a difficult problem to solve.
Here is my sample project
Basically I want to create a editable book-like container and since each book page is another container, I can't figure how to make an editor transition from one page to another, once the page is filled with text.
Here is what I'm trying to achieve:
My first thought was to use a shared state for multiple editor instances, but as you can see in the example code, it doesn't work as expected and same text appears in two pages.
How can I achieve a multi-container transition when using draft.js?

The logic in general is to listen to changes of the first editor, count characters / word / lines (or more advanced calculation, if the editor has scroll for example) and finally focus the second editor if needed.
This answer covers, listen, dummy calculation and focus on the next editor.
This answer doesn't cover the calculation itself nor dynamic number of pages nor moving back from second editor when deleting content etc. But I believe that it's a direction to your final goal.
Listen
First of all, I moved the state creation and handling back to the Editor component itself. What "interests" the parent component ("App") is to get notified when its content changed.
But now, App needs to access the ("draft-js") editor in order to call focus. This will solve by creating "ref" in App and propagate it using forwardRef.
const editorRef = React.useRef();
const Editor = React.forwardRef((props, ref) => {
return <MyEditor name="editor-2" forwardRef={ref} />;
});
...
return (
...
<Editor ref={editorRef} />
)
and in Editor.js
function MyEditor({ onChange, forwardRef }) {
...
return (
<Editor
ref={forwardRef}
)
});
Next thing is to add onChange to Editor so App get notified when the content has been changed.
<Editor
ref={forwardRef}
stripPastedStyles
editorState={editorState}
onChange={editorState => {
setEditorState(editorState);
onChange && onChange(editorState); // <---
}}
/>
Handle the change and focus
The first editor is now
<MyEditor name="editor-1" onChange={onEditorChange} />
and onEditorChange is
const onEditorChange = editorState => {
const text = editorState.getCurrentContent().getPlainText();
if (text.length >= 5) {
setTimeout(() => {
editorRef.current.focus();
});
}
};
Currently it checks if the content's length is 5. You probably want to calculate it in a more sophisticated way.
The last question is, why setTimeout? Well, the simple answer is that without it, "draft-js" throw an error. I believe that it's something with their implementation of release / delete / clear global variables or something.
And the most important part, the code and live demo :)
https://codesandbox.io/s/young-shape-t6kcc?file=/src/App.js

scrollToRow result is off for dynamic height list

First off, let me provide a little background on my use case for react-virtualized. I am using it together with the v2.0 beta version of react-pdf in order to build a pdf viewer that can handle displaying/rendering pdf documents with a lot of pages more efficiently. An important requirement is that the pdf viewer is fully responsive and can handle documents that have pages that possibly have differing heights.
I have managed to combine both packages (there are a couple of minor react-pdf related hickups), but there are a couple of things that don't quite work like I would expect. Most noticeably, scrolling to a specific row (i.e. page) doesn't really work too well. To give an example, if I attempt to scroll to page index 81 (approximately the middle of my 152 page test pdf) from page index 0, I end up somewhere midway between the desired page and the next page. If I attempt to scroll to the last page index (p.i. 151) I end up at the next to last page.
I am using a combination of WindowScroller, AutoSizer, CellMeasurer and List to create my viewer (I have omitted parts that don't matter directly):
class Viewer extends Component {
constructor(props) {
super(props);
this.state = {pdf: null, scale: 1.2};
this._cache = new CellMeasurerCache({defaultHeight: 768, fixedWidth: true});
}
...
handleResize() {
this._cache.clearAll(); // Reset the cached measurements for all cells
}
updatePageIndex(index) {
this._cache.clearAll();
this._list.scrollToRow(index);
}
rowRenderer({key, index, style, parent}) {
return (
<CellMeasurer cache={this._cache} columnIndex={0} key={key} parent={parent} rowIndex={index}>
{
({measure}) => (
<div style={style}>
<Page
onLoadSuccess={measure}
renderTextLayer={false}
pdf={this.state.pdf}
pageNumber={index + 1}
scale={this.state.scale} />
</div>
)
}
</CellMeasurer>
);
}
render() {
...
<Document
file="./some_pdf_document.pdf"
loading={<Loader />}
error={this.renderError()}
onLoadSuccess={this.onDocumentLoadSuccess.bind(this)}
>
<WindowScroller onResize={this.handleResize.bind(this)}>
{
({height, isScrolling, onChildScroll, scrollTop}) => (
<AutoSizer disableHeight>
{
({width}) => (
<List
autoheight
height={height}
width={width}
isScrolling={isScrolling}
onScroll={onChildScroll}
scrollToAlignment="start"
scrollTop={scrollTop}
overscanRowCount={5}
rowCount={this.state.pdf.numPages}
deferredMeasurementCache={this._cache}
rowHeight={this._cache.rowHeight}
rowRenderer={this.rowRenderer.bind(this)}
style={{outline: 'none'}}
ref={ref => this._list = ref} />
)
}
</AutoSizer>
)
}
</WindowScroller>
</Document>
}
}
...
Is what I do in updatePageIndex() correct or is there still something missing?

I think there's a misunderstanding or two above. Firstly, calling cache.clearAll() will erase all measurements- requiring CellMeasurer to recompute them all on the next render. Unless something has changed that invalidates these measurements- (which doesn't seem to be the case from your description)- then you wouldn't want to do this. This method should only be called if a measurement may be invalid due to a change like a browser width resize that might affect the height of wrapping text content, etc.
Secondly, if you do need to call cache.clearAll() then you will also want to call list.recomputeRowHeights(). CellMeasurer caches measurements (sizes) and List caches positions (offsets). This lets data be re-ordered (eg sorted) without requiring re-measurement. All that's needed after a sort is for List to recompute its positions.
Check out this code snippet from a Twitter-like demo app I built with react-virtualized for an example of how this is done.
If the above info doesn't help you resolve matters, leave a comment and a repro on CodeSandbox or similar and I'll take a look.

The only way I got this to work properly (i.e. scroll to the right page) was to use the scrollToIndex property of the List component. Setting that to a certain row index strangely enough does scroll to the right page.
Only problem with using scrollToIndex is that it doesn't allow you to scroll back up past the scroll index. My workaround is to set the index back to -1 after the scroll has completed. However, if I do this too quick, scrollToIndex also scrolls to the wrong row. The only way I managed to get around this is to set the index to -1 using setTimeout(). Very hacky, but it does the trick. I tried other ways using componentDidUpdate() and a promise, but none of them worked for me.