Hello everybody
I need urgent help to make React component like calendar scheduler. It should be built purely by react plain code without any React library.
Please check attached gif file.
https://giphy.com/gifs/EBh6Z4HyD2VzeouCPl/html5
The main goal of this project is to check CSS animation skill so I need to build the component as similar as possible in terms of animation.
If you know any similar example, it would be great and please let me know.
Thank you and sincerely looking forward to your help.
Hi Everyone, What is the best way to handle the state for the block based editor. I have added the detailed explanation in this stack overflow question. Please help.
https://stackoverflow.com/questions/65101783/how-to-split-state-to-avoid-rerender-in-react-app
class BasicComponent extends React.Component {
constructor (props){
super(props)
this.state = {
id: "id",
title: "component",
inputs: [],
outputs: [],
}
this.handleClick = this.handleClick.bind(this)
this.handleMouseDown = this.handleMouseDown.bind(this)
this.handleMouseUp = this.handleMouseUp.bind(this)
this.handleMouseMove = this.handleMouseMove.bind(this)
}
render() {
console.log("render");
return(
<div className="component"
onMouseDown={ this.handleMouseDown }
onMouseUp={ this.handleMouseUp }
onMouseMove={ this.handleMouseMove }>
<div className="title">Title</div>
<div className="id">ID: c_356545454</div>
<div className="inputs">inputs</div>
<div className="core">core</div>
<div className="outputs">outputs</div>
</div>
);
}
handleClick() {
}
handleMouseDown() {
console.log("handleMouseDown");
}
handleMouseUp() {
console.log("handleMouseUp");
}
handleMouseMove() {
console.log("handleMouseMove");
this.handleMouseMove = null <===== a want to change the hundler or disabled here
}
}
Hi guys,
Please check out one of my new projects
ππ»https://flexbox-guide.souravdey777.vercel.app/
β‘ Flexbox-Guide is a website developed for web developers and π¨βπ»Coding newbies learning CSS Flexbox Layout. This website can be used for both learnings or generating the code. Simply arrange the flex items as you need and copy the CSS to your code. π¨βπ
Loved it!. β Star the Repository and support the project.
ππ»https://github.com/Souravdey777/flexbox-guide
Show more love β€ by upvoting it in Product Hunt
ππ»https://www.producthunt.com/posts/flexbox-guide
Hi guys,
Please check out one of my new projects
ππ»https://flexbox-guide.souravdey777.vercel.app/
β‘ Flexbox-Guide is a website developed for web developers and π¨βπ»Coding newbies learning CSS Flexbox Layout. This website can be used for both learnings or generating the code. Simply arrange the flex items as you need and copy the CSS to your code. π¨βπ
Loved it!. β Star the Repository and support the project.
ππ»https://github.com/Souravdey777/flexbox-guide
Show more love β€ by upvoting it in Product Hunt
ππ»https://www.producthunt.com/posts/flexbox-guide
Hello.
I have started a new series at webup.org/blog called React Patters. It is intended to cover non-trivial component patterns in React.
Here is the first post React Patterns: A Component with Unknown Content Variants