React - Ag-grid - Column date converions with moment.js
--------------------------------------------------------
projectCMD:>npm install --save moment react-moment
react-Ag-grid-component.js
-------------------------------
import * as moment from 'moment';
const agGridColumn = [
{
headerName: 'Employee Name',
field: 'empName',
},
{
headerName: 'Date of Birth',
field: 'dob',
cellRenderer: (data) => {
return moment(data.createdAt).format('MM/DD/YYYY HH:mm')
}
},
]
ReactJS | Types of Routers - 3 types
===========================
Memory Router
Browser Router
Hash Router
1Memory Router
---------------------
Pre-requisite: Before start this article you need to have basic knowledge of React Router.
Memory Router: Memory router keeps the URL changes in memory not in the user browsers. It keeps the history of the URL in memory (does not read or write to the address bar so the user can not use the bowser’s back button as well as the forward button. It doesn’t change the URL in your browser. It is very useful for testing and non-browser environments like React Native.
Syntax:
import { MemoryRouter as Router } from 'react-router-dom';
2.Browser Router
------------------
Browser Router: It uses HTML 5 history API (i.e. pushState, replaceState and popState API) to keep your UI in sync with the URL. It routes as a normal URL in the browser and assumes that the server is handling all the request URL (eg., /, /about) and points to root index.html. It accepts forceRefresh props to support legacy browsers which doesn’t support HTML 5 pushState API
Syntax:
import { BrowserRouter as Router } from 'react-router-dom';
3.Hash Router:
------------------
Hash router uses client-side hash routing. It uses the hash portion of the URL (i.e. window.location.hash) to keep your UI in sync with the URL. Hash portion of the URL won’t be handled by the server, the server will always send the index.html for every request and ignore the hash value. It doesn’t need any configuration in the server to handle routes. It is used to support legacy browsers which usually don’t support HTML pushState API. It is very useful for the legacy browsers or you don’t have a server logic to handle the client-side. This route isn’t recommended to be used by the react-router-dom team.
Syntax:
import { HashRouter as Router } from 'react-router-dom';
import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Link, Switch } from 'react-router-dom'; /// instead of BrowserRouter, some many routes need to be added.
import Home from './component/home';
import About from './component/about';
import Contact from './component/contact';
import './App.css';
class App extends Component {
render() {
return (
<Router>
<div className="App">
<ul className="App-header">
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About Us</Link>
</li>
<li>
<Link to="/contact">
Contact Us
</Link>
</li>
</ul>
<Switch>
<Route exact path='/'
component={Home}>
</Route>
<Route exact path='/about'
component={About}>
</Route>
<Route exact path='/contact'
component={Contact}>
</Route>
</Switch>
</div>
</Router>
);
}
}
export default App;
Renderforest offers you the best online branding tools to create high-quality videos, logos, graphics, mockups, and websites with minimal time and effort.
Renderforest offers you the best online branding tools to create high-quality videos, logos, graphics, mockups, and websites with minimal time and effort.
https://www.renderforest.com/templates
React fun comp -CKEditor - 2 way Data Binding - Compare with Textarea and Editorpreview with unsafeHTML
=========================================================================
import React, { useState } from 'react'; import PropTypes from 'prop-types';
import CKEditor from 'ckeditor4-react';
const TwoWayBinding = ()=> {
const[data, setData] = useState('<p>React is really <em>nice</em>!</p>');
function onEditorChange( evt )
{
setData(evt.editor.getData());
}
function handleChange( changeEvent )
{
setData(changeEvent.target.value);
}
return (
<div>
<CKEditor data="{data}" onChange="{onEditorChange}" />
<label>
Change value:
<textarea defaultValue="{data}" onChange="{handleChange}" />
</label>
<EditorPreview data="{data}" />
</div>
);
}
function EditorPreview(props)
{
return (
<div className="editor-preview">
<h2>Rendered content</h2>
<div dangerouslySetInnerHTML="{" { __html: props.data } }></div>
</div>
);
}
EditorPreview.defaultProps = { data: '' };
EditorPreview.propTypes = { data: PropTypes.string };
export default TwoWayBinding;
React, Angular Rich Text editor - CKEditor npm module
==========================================
In order to create an editor instance in React, install the ckeditor4-react npm package as a dependency of your project:
React:
=======
Project_cmd:>npm install ckeditor4-react
After installing, the CKEditor 4 React component can be imported in your JavaScript code:
import CKEditor from 'ckeditor4-react';
e.g:
import React, { Component } from 'react';
import CKEditor from 'ckeditor4-react';
class App extends Component {
render() {
return (
<div className="App">
<h2>Using CKEditor 4 in React</h2>
<CKEditor
data="<p>Hello from CKEditor 4!</p>"
/>
</div>
);
}
}
export default App;
Angular:
========
In order to create an editor instance in Angular, install the ckeditor4-angular npm package as a dependency of your project:
Project_cmd:>npm install ckeditor4-angular
After installing, import CKEditorModule to your application:
import { CKEditorModule } from 'ckeditor4-angular';
@NgModule( {
imports: [
...
CKEditorModule,
...
],
…
} )
e.g:
The initial data of the WYSIWYG editor. It can be a static value:
<ckeditor data="<p>Hello, world!</p>"></ckeditor>
or a shared parent component’s property:
import { CKEditor4 } from 'ckeditor4-angular/ckeditor';
@Component( {
...
} )
export class MyComponent {
public editorData = '<p>Hello, world!</p>';
}
<ckeditor [data]="editorData"></ckeditor>
Integrated with ngModel:
------------------------
To use it, first create a model in your component:
@Component( {
...
} )
export class MyComponent {
public model = {
editorData: '<p>Hello, world!</p>'
};
...
}
Then you can use the model in the template to enable the two-way data binding.
<ckeditor [(ngModel)]="model.editorData"></ckeditor>
React File Upload - import CSV Axios POST - (blob from Spring Boot)
------------------------------------------------------------------------
<div className="form-group files color">
<label>Upload Your File </label>
<input type="file" className="form-control" name="file" onChange={onFileChangeHandler}/>
</div>
onFileChangeHandler = (e) => {
e.preventDefault();
setSelectedFile: e.target.files[0]
const formData = new FormData();
formData.append('file', selectedFile);
fetch('http://localhost:8080/upload', {
method: 'post',
body: formData
}).then(res => {
if(res.ok) {
console.log(res.data);
alert("File uploaded successfully.")
}
});
};
Upload specfic button to make API call
-----------------------------------------------
<input type="file" className="form-control" name="file" onChange={onFileChangeHandler}/>
<Button type="button" onClick={() => uploadChanges()}>Upload</Button>
onFileChangeHandler = (e) => {
e.preventDefault();
setSelectedFile: e.target.files[0]
}
const uploadChanges = () => {
const formData = new FormData();
formData.append('file', selectedFile);
axios.post("/api/endPointURL, data, {
headers: {
"Content-Type": "text/plain;charset=utf8",
}
// receive two parameter endpoint url ,form data
} ).then(res => { // then print response status
console.log("response->"+res.data.statusMessage);
if(res.data.statusTxt === 'Success'){
setMessage('Uploaded Successfully');
setToastrType("success");
}else {
setMessage(res.data.errorTxt);
setToastrType("error");
}
setShowToastr(true);
})
}else{
//alert("Choose the excel and click upload");
setMessage("Choose the excel and click upload");
setToastrType("error");
setShowToastr(true);
}
}
React File Download - exportCSV Axios POST - (blob from Spring Boot)
--------------------------------------------------------------------
component.js
---------------
import ServiceApi from './ServiceAPI';
<Button onClick={downLoadFile}> DownLoad</Button>
function downLoadFile(){
ServiceApi.exportCSV(postData).then( response =>{
const url = window.URL.createObjectURL(new Blob([response.data]));
const link = document.createElement('a');
link.href = url;
link.setAttribute('download', 'FileName.xls'); //or any other extension
document.body.appendChild(link);
link.click();
});
}
ServiceAPI.js
------------------
import axios from 'axios';
class ServiceApi {
exportCSV(postData){
return axios.post('/api/endPointURL',postData, {ContentDisposition: "attachment;filename=report.xls", responseType:
'blob'} ).catch(function(error) {
console.log(error);
});
}
export default new ServiceApi()
React- Hooks- Gloabal spinner for react application
======================================
src/hooks/useFullPageSpinner.js
-------------------------------
import React, { useState } from 'react';
import { Spinner } from '@mat-ui/spinner';
import { AriaAnnouncerProvider } from '@mat-ui/aria-announcer';
const useFullPageSpinner = () => {
const [loading, setLoading] = useState(false);
return [
loading ? <> <AriaAnnouncerProvider>
<Spinner style={{ position: "absolute", top: "50%", left: "50%" , zIndex:1000}} className="circular-spinner large" />
</AriaAnnouncerProvider>
</>: null,
() => setLoading(true), // show the spinner
() => setLoading(false) // hide the spinner
]
}
export default useFullPageSpinner;
src/App/componets.js
--------------------
import React from 'react';
import useFullPageSpinner from "../hooks/useFullPageSpinner";
App () {
const [loader, showLoader, hideLoader] = useFullPageSpinner();
const [ userData, setUserData] = useState([]);
useEffect( () =>{
loadUserData();
},[]);
function loadUserData(){
showLoader();
api.get('/api/endpoint').then( res =>{
hideLoader();
if(res.status){
console.log(res);
setUserData(res.data);
}
else{
setUserData([]);
}
});
}
return (
<loader>
{ userData.map( item=> <div >{ itemv} </div>) }
</>
)
}
React - Axios call - hooks based - 3 types API connection - CORS issue fix
===========================================================================
cmd:>npx create-react-app reactProject
cd reactProject
....
develop some pages/component/screens in react projects
.....
reactProject:> npm i Axios
verify the axios version at package.json
Avoid the cors issue in local development, while prod - both UI and service need to be in same place.
package.json
-----------------
"proxy": "http://localhost:8080",
"engines": {
"node": "^12",
"npm": "^6"
},
Best - Method:1
src/utils/api.js
----------------------
import axios from 'axios';
const call = method => (url, { body, query, headers } = {}) => {
return axios({
method,
baseURL: url, //baseURL: `http://localhost:8080${url}`,
data: body,
headers, //headers:{"Access-Control-Allow-Origin": "*"},
params: query
})
.then(response => response.data)
.catch(function(error) {
console.log(error);
});
};
export default {
get: call('GET'),
post: call('POST'),
put: call('PUT'),
delete: call('DELETE')
};
App.js
-------
useEffect( () =>{
// global get,post,put methos, just pass end point url of API, Error handling done in one place.
const userData = api.get('/api/endpoint');
console.log(userData)
});
Method:2
----------
src/services/serviceApi.js
---------------------------
import axios from 'axios';
class ServiceApi {
getUserData() {
return axios.get('/api/endPoint').catch(function(error) {
console.log(error);
});
}
getUserInfoData() {
return axios.get('/api/user').catch(function(error) {
console.log(error);
});
}
}
export default new ServiceApi()
App.js
------
import ServiceApi from '../services/serviceApi';
useEffect( () =>{
ServiceApi.getUserData().then(res => {
console.log(res.data.data);
//setData(res.data.data[0]);
})
});
Method:3
--------
component.ts
-------------
import axios from 'axios'; // method:3
useEffect( () =>{
axios.get('/api/endpoint').then ( response =>{
console.log(response)
}).catch( function(error){
console.log(error)
});
},[])
