Frontend

In this tutorial we are going to create draggable <div/> in React application. Also we are not going use any external libraries for this implementation which will help you to customise this code as per your requirement. End result will look like below : Basic idea is we are going to create a wrapper with styled components, and will add actions for onMouseDown and onMouseUp . In the actions native event properties like pageX,pageY,offsetX and offsetY to calculate new positions of the draggable div. Let's create the styled wrapper first : const StyledWrapper = styled.div ` width : 200 px; height : 120 px; position : absolute; top : 40 px; left : 227 px; background - color : rgb( 0 , 0 , 0 , 0.5 ); cursor : pointer; z - index :100 ; padding - top :20 px; ` We will return this wrapper, from this component. Within that wrapper we will add other required div elements. < StyledWrapper > < div style ...

Hello everyone, in this tutorial we are going to create 'Tooltip' component for React , but we will not use any external library, so that you get the flexibility to customise it according to your project need. So Let's start. First Let's see have a look of the final outcome : So we will start by initiating a project with create-react-app. And within src folder we will create a Tooltip.js file, Tooltip component will allow user to pass tooltip text. import React from 'react' import './style.css' const Tooltip = ({text}) => { return ( < div style = {{ textAlign : 'center' , margin : '10%' }} > < div class = "custom-tooltip" > Hover to see tooltip < span class = "custom-tooltip-text" > {text} < /span> < /div> < span style = {{ display : 'block' ...

Let's take a quick look at final output : Modal.js File , which contains modal view and its content along with a close button import React from 'react' import './style.css' const Modal = ({open,close,modalText}) =>{ const classModal = open ? "modal--open" : "modal--close" return ( <div className={classModal}> <div className= "modal" > <span className= "close" onClick={close}>X< /span> <span className= "modalText" >{modalText}< /span> < /div> < /div> ) } export default Modal style.css file used in above file .modal { padding : 12px; background : blue; width : 320px; text-align : center ; } @keyframes fadeIn { from { opacity : 0; } to { opacity : 1; } } @keyframes fadeOut { from { opacity : 1; } to { opacity : 0; } } ....

Hello everyone, earlier we have developed a react table view solution for frozen column, if you missed the post please find it here : https://reactcodes.blogspot.com/2019/11/react-fixed-table-header-code-without.html Today we will try to make the table header fixed but make the data vertically scrollable, below demo shows how the final result will be : To get the full codebase you may see my github link : https://github.com/reactcodes/react-sticky-table Explanation of process : Initially if you clone the codebase within App.js you will see that I have separated table header items and put those in an array const tableHeaders = [ "First Column", "Second Column", "Third Column", "Fourth Column", "Fifth Column", "Sixth Column", "Seventh Column", "Eight Column", ] Then I have the table data coming as a json I have the stickytableheader ...

Hello everyone ,today we are going to implement tableview with fixed column without using any external library. So let's start : I have initiated a react project and created two files, FixedColumnTable.js for logic and FixedColumnTable.css for holding styles. And called the same component in project's App.js FixedColumnTable.js import React, { Component } from 'react' import './FixedColumnTable.css' class FixedCoulmnTable extends Component { constructor(props) { super (props) this .state = { fixedHeaders : this .props.headers.slice( 0 , this .props.frozen), regularHeaders : this .props.headers.slice( this .props.frozen, this .props.headers.length) } } componentDidMount(){ console.log( this .props.headers.slice( 0 , this .props.frozen)) console.log( this .props.headers.slice( this .props.frozen, this .props.headers.length)) } addTd = (arr) =>{ return ...