React JS

React Color Picker Tutorial Example

React Color Picker Tutorial Example

React Color Picker Tutorial Example : In this instructional exercise, you will figure out how to execute color picker in React JS applications.

You more likely than not seen in many web and applications that you can pick the shading straightforwardly on color picker. You need to add basic color picker to your React JS application. So in this instructional exercise you will get bit by bit guide. With the assistance of which you can add your React JS application basic color picker.

Live demo : See here

Create Color Picker in React :

  • Step 1 – Create React App
  • Step 2 – Add Bootstrap Library
  • Step 3 – Add Color Picker Library
  • Step 4 – Create Color Picker Component
  • Step 5 – Add Color Picker Component in App.js

Step 1 – Create React App :

npx create-react-app my-colorpicker-app

Run app now:

npm start

Go to URL: localhost:3000

Step 2 – Add Bootstrap Library :

Install bootstrap:

npm install bootstrap --save

Add bootstrap.min.css file in src/App.js file:

import React, { Component } from 'react'
 
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
 
function App() {
  return (
    <div>
      <h2>How to create color picker in React</h2>
    </div>
  );
}
 
export default App;

Step 3 – Add Color Picker Library :

npm install react-color --save

Step 4 – Create Color Picker Component :

Make ColorPickerComponent.js document. Along these lines, visit the src directory of your application and make a table component document named ColorPickerComponent.js. What’s more, add the accompanying code into it :

'use strict'
 
import React from 'react'
import reactCSS from 'reactcss'
import { SketchPicker } from 'react-color'
 
class ColorPickerComponent extends React.Component {
    state = {
      displayColorPicker: false,
      color: {
        r: '241',
        g: '112',
        b: '19',
        a: '1',
      },
    };
 
    handleClick = () => {
      this.setState({ displayColorPicker: !this.state.displayColorPicker })
    };
 
    handleClose = () => {
      this.setState({ displayColorPicker: false })
    };
 
    handleChange = (color) => {
      this.setState({ color: color.rgb })
    };
 
    render() {
 
      const styles = reactCSS({
        'default': {
          color: {
            width: '36px',
            height: '14px',
            borderRadius: '2px',
            background: `rgba(${ this.state.color.r }, ${ this.state.color.g }, ${ this.state.color.b }, ${ this.state.color.a })`,
          },
          swatch: {
            padding: '5px',
            background: '#fff',
            borderRadius: '1px',
            boxShadow: '0 0 0 1px rgba(0,0,0,.1)',
            display: 'inline-block',
            cursor: 'pointer',
          },
          popover: {
            position: 'absolute',
            zIndex: '2',
          },
          cover: {
            position: 'fixed',
            top: '0px',
            right: '0px',
            bottom: '0px',
            left: '0px',
          },
        },
      });
 
      return (
        <div>
          <div style={ styles.swatch } onClick={ this.handleClick }>
            <div style={ styles.color } />
          </div>
          { this.state.displayColorPicker ? <div style={ styles.popover }>
            <div style={ styles.cover } onClick={ this.handleClose }/>
            <SketchPicker color={ this.state.color } onChange={ this.handleChange } />
          </div> : null }
 
        </div>
      )
    }
}
 
export default ColorPickerComponent

Step 5 – Add Color Picker Component in App.js

In this progression, you need to add ColorPickerComponent.js document in src/App.js record:

import React from 'react';
 
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
 
import ColorPickerComponent from './ColorPickerComponent'
 
function App() {  
     
  return (  
    <div className="App">  
      <ColorPickerComponent />  
    </div>  
  );  
}  
 
export default App;

How to Add and Remove Row Dynamically in React JS

How to Add and Remove Row Dynamically in React JS

How to Add and Remove Row Dynamically : React is a front-end library created by Facebook. It is utilized for dealing with the view layer for web and portable applications. ReactJS permits us to make reusable UI segments. It is right now perhaps the most well known JavaScript libraries and has a solid establishment and huge local area behind it.

This instructional exercise will help JavaScript engineers who look forward to manage ReactJS interestingly. We will attempt to present each idea by showing basic code models that can be handily perceived. Subsequent to completing every one of the parts, you will feel sure working with ReactJS. As a little something extra we will present extra components that function admirably with ReactJS to assist you with learning the prescribed procedures and pursue the advanced JavaScript directions.

Introduction to the Blog

This tutorial will teach you how to add and remove rows from the network.

This instructional exercise additionally covers the Reactive structure approvals on powerfully created components and reset structure in the wake of presenting the structure.

In the wake of Researching numerous things over google about this usefulness the websites were not covering everything simultaneously.

So I chose to compose code myself and offer it with each and every individual who actually needs it.

This will required to Setup ReactJS Locally on you system along with Node JS : See here

We should begin :

It will require 2 Files.

app.js

app.css

App.js :

In this file you will have to install two dependency :

npm install react-bootstrap

and  then

npm install react-bootstrap bootstrap

 

import './App.css';
import React , {useState}   from "react";
import 'bootstrap/dist/css/bootstrap.min.css';
import { Container } from 'react-bootstrap';
function App() {
//------------Contact Information Phone Script starts here------------- //
const[contactPhoneList, setcontactPhoneList] = useState([
{contactPhoneType: "Program 1", contactCountryCode: "Test", contactMobileNumber: "9050131191", contactExtension: "Extension 1", contactIsPrefered : true}]
) 
const cPhoneHandleChange = (e,index) => {  
let {id, value} = e.target; // accessing the value of element by ID\ 
//Checking if element is checkbox or not and setting it's value true 
if(e.target.checked == true && e.target.type === 'checkbox'){
value = true;
}
//Checking if element is checkbox or not and setting it's value false
else if(e.target.checked == false &&  e.target.type === 'checkbox'){   
value=false;
} 
const cPhonelist = [...contactPhoneList];
cPhonelist[index][id] = value; 
setcontactPhoneList(cPhonelist);
}
const cPhonehandleAddInput = () => {
setcontactPhoneList([...contactPhoneList, {contactPhoneType: "Program 1", contactCountryCode: "Test", contactMobileNumber: "9050131191", contactExtension: "Extension 1",contactIsPrefered : true}])
}
const cPhoneHandleRemoveInput = (index) => {
const cPhonelist = [...contactPhoneList];
cPhonelist.splice(index, 1);
setcontactPhoneList(cPhonelist);
}
//------------Contact Information Phone ends starts here------------- //  
return (
<div className="App">
<header className="App-header">
<Container>
<div class="row result">
{JSON.stringify(contactPhoneList , null , 2)}
</div>
{contactPhoneList.map((item,i) => {
return(
<div className="row">
<div className="col-md-2 col-6">
<div className="form-group floating">
<select className="form-select" id="contactPhoneType" value={item.contactPhoneType} onChange={e => cPhoneHandleChange(e,i)}>
<option selected disabled value="">Phone Type</option>
<option>Personal</option> 
<option>Work</option>    
<option>Alternate</option>      
<option>PA</option>                   
</select>
</div>
</div>
<div className="col-md-2 col-6">
<div className="form-group floating">
<select className="form-select" id="contactCountryCode" value={item.contactCountryCode} onChange={e => cPhoneHandleChange(e,i)} required >
<option selected disabled value="">Country Code</option>
<option>+1</option> 
<option>+2</option>    
<option>+3</option>      
<option>+4</option>                   
</select>
<div className="invalid-feedback">
Please select Country Code.
</div>
</div>
</div>                            
<div className="col-md-2 col-6">
<div className="form-group">
<input type="text" id="contactMobilenumber" className="form-control" placeholder="Number" name="contactMobilenumber" value={item.contactMobilenumber} onChange={e => cPhoneHandleChange(e,i)} required />
</div>
</div>
<div className="col-md-2 col-6">
<div className="form-group">
<input type="text" id="contactExtension" className="form-control" placeholder="Extension" name="cextension" value={item.contactExtension} onChange={e => cPhoneHandleChange(e,i)} />

</div>
</div>
<div className="col-md-2 col-6">
<div className="d-flex ">
<label htmlFor="floatingInput">Active
</label>
<div className="form-check form-switch ms-3">
<input className="form-check-input contactIsPrefered" type="checkbox" id="contactIsPrefered" defaultChecked={item.contactIsPrefered} value={item.contactIsPrefered}  onChange={e => cPhoneHandleChange(e,i)}/>
<label className="form-check-label" htmlFor="contactIsPrefered" />
</div>
</div>
</div>
<div className="col-md-2 col-6">
<div className="actionContainer ">
{contactPhoneList.length - 1 === i &&
// <button type="button" className="btn btn-primary">Add More</button>
<a href className="ms-4" onClick={cPhonehandleAddInput} >
<img src="https://img.icons8.com/color/48/000000/add.png"/>
{/* <div className="icon dripicons-trash" /> */}
</a> 

}                                
{contactPhoneList.length !== 1 &&
<a href className="ms-4" onClick={e => cPhoneHandleRemoveInput(i)}>
<img src="https://img.icons8.com/color/48/000000/delete-sign--v1.png"/>
{/* <div className="icon dripicons-trash" /> */}
</a>  
}                                   
</div>
</div>                                
</div>   
)
})}
</Container>
</header>
</div>
);
}
export default App;

App.css

.App {
  text-align: center;
}

.App-logo {
  height: 40vmin;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
  }
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.App-link {
  color: #61dafb;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.result{
  height: 200px;
  overflow: scroll;
  border: 1px solid;
  background-color: #3e3e3e;
  margin-bottom: 30px;
  font-size: 14px;
}

 

How to Import Components from React Bootstrap

How to Import Components from React Bootstrap

Introduction

How to Import Components from React Bootstrap : React Bootstrap is one of the broadly utilized libraries in React, and its different segments are utilized in React applications to make them portable agreeable. It has huge loads of segments that give applications the different subtleties of design, structure controls, data pointers, and navigational segments.

In this aide, you will figure out how to add React Bootstrap into a React application by bringing in and utilizing the React Bootstrap parts in your React segments.

Adding React Bootstrap into a React App :

Install the React Bootstrap library by using the below npm command.

npm install react-bootstrap bootstrap

After installing the above two libraries, the next step is to add bootstrap CSS file into either index.js or app.js like this:

import 'bootstrap/dist/css/bootstrap.min.css';

On the other hand, in case you are utilizing SASS in your application, you can add it as displayed beneath.

App.scss

@import "~bootstrap/scss/bootstrap";

App.js

import './App.scss';

Presently you are a great idea to proceed to can continue further with React Bootstrap by bringing different segments into your React application.

Importing Components from React Bootstrap :

Since you have introduced the bootstrap library and arranged the CSS record into your application, it’s an ideal opportunity to import the segments from react-bootstrap.

The essential language structure for bringing in anything from react-bootstrap resembles this:

import { COMPONENT_NAME } from 'react-bootstrap';
or
import COMPONENT_NAME from 'react-bootstrap/COMPONENT_NAME';

It is the fundamental language structure that is utilized to import the particular segments from the library, yet you can in any case import it utilizing alternate ways that you will learn in the following segment of this aide.

Import Components from the React Bootstrap Library

Importing Single Components

You can import any Solo component from react-bootstrap as shown below.

import React, { Component } from "react";
import { Image } from "react-bootstrap";

class SoloComponent extends Component {
  render() {
    return (
      <div>
        <Image
          src="https://dummyimage.com/170x180/000/fff.png&text=TEST123"
          thumbnail
        />
      </div>
    );
  }
}

export default SoloComponent ;

In the above model, to import the Solo component called Image from the react-bootstrap library, the order utilized is:

import { Image } from "react-bootstrap";

Inside the render() work, the <Image/> component is utilized alongside different properties like href and another supporting property called thumbnail.

This is the means by which you can import any single segment from React Bootstrap:

Import Solo Components Individually : 

You can import and utilize any React Bootstrap component exclusively from respond bootstrap instead of bringing in them from the total library as displayed beneath.

import React, { Component } from "react";
import Breadcrumb from "react-bootstrap/Breadcrumb";

class SoloIndividualComp extends Component {
  render() {
    return (
      <Breadcrumb>
        <Breadcrumb.Item href="#">Home</Breadcrumb.Item>
        <Breadcrumb.Item href="#">Profile</Breadcrumb.Item>
        <Breadcrumb.Item active>Test123</Breadcrumb.Item>
      </Breadcrumb>
    );
  }
}

export default SoloIndividualComp ;

As displayed in the above model, Breadcrumb exclusively imported by utilizing this order:

import Breadcrumb from "react-bootstrap/Breadcrumb";

Pulling the particular component from the library instead of getting the entire bundle works on the exhibition while bringing and delivering the specific segment.

Use React Bootstrap Default Syntax 

The default sentence structure is an approach to utilize React Bootstrap powerfully without naming the particular segments, as done beforehand.

import React, { Component } from "react";
import * as ReactBootstrap from "react-bootstrap";

class DynamicImport extends Component {
  render() {
    return (
      <ReactBootstrap.Button bsStyle="success" bsSize="small">
        Something
      </ReactBootstrap.Button>
    );
  }
}

export default DynamicImport;

The above model doesn’t import any parts by name yet utilized a powerful import configuration to bring a particular segment when required, as displayed underneath.

import * as ReactBootstrap from "react-bootstrap";

At the point when you need any segments while fostering the UI, you need to utilize prefix ReactBoootstrap.comp_name followed by the particular segment name, which makes it simpler to utilize.

Importing Multiple Components

So far in this aide, you have figured out how to import a solitary explicit segment, yet you can import different segments from the single import articulation also.

The following is a basic model that tells the best way to import numerous segments from respond bootstrap from a solitary import proclamation.

 

import React, { Component } from "react";
import { Form, Col, Button } from "react-bootstrap";

class MultipleImport extends Component {
  render() {
    return (
      <Form>
        <Form.Row>
          <Col>
            <Form.Control placeholder="First name..." />
          </Col>
          <Col>
            <Form.Control placeholder="Last name..." />
          </Col>
          <Col>
            <Button>Submit</Button>
          </Col>
        </Form.Row>
      </Form>
    );
  }
}

export default MultipleImport;

In the above model, three segments, Form, Col, and Button, are imported from the single import explanation.

import { Form, Col, Button } from "react-bootstrap";

You can pick any of these techniques, however with regards to the exhibition, the different segments import proclamation or individual part import are way better compared to the others. I trust this aide assists you with messing about bringing in different segments. That was it from this aide; be protected, and continue to code.