Top
import {Btn} from '../../AbstractElements'
<Btn attrBtn={{color:"primary"}} >Primary</Btn>
<Btn attrBtn={{color:"secondary"}} >Secondary</Btn>
<Btn attrBtn={{color:"success"}} >Success</Btn>
<Btn attrBtn={{color:"info"}} >Info</Btn>
<Btn attrBtn={{color:"warning"}} >Warning</Btn>
<Btn attrBtn={{color:"danger"}} >Danger</Btn>
To use another types button you have to link the related css file according to types of buttons in a head tag
import { Badges } from '../../AbstractElements';
<Badges attrBadge={{color:"primary"}} >Primary</Badges>
<Badges attrBadge={{color:"secondary"}} >Secondary</Badges>
<Badges attrBadge={{color:"success"}}>Success</Badges>
<Badges attrBadge={{color:"info"}} >Info</Badges>
<Badges attrBadge={{color:"warning"}} >Warning</Badges>
<Badges attrBadge={{color:"danger"}} >Danger</Badges>
<Badges attrBadge={{color:"light"}} >Light</Badges>
<Badges attrBadge={{color:"dark tag-pills-sm-mb"}>Dark</Badges>
import {Progressbar} from '../../AbstractElements'
<Progressbar attrProgress={{ value: '0' }} />
<Progressbar attrProgress={{ color: 'primary', value: '25' }} />
<Progressbar attrProgress={{ color: 'secondary', value: '50' }} />
<Progressbar attrProgress={{ color: 'success', value: '75' }} />
import {Alerts} from '../../AbstractElements';
<Alerts attrAlert={{color:'primary dark'}} >This is a info alert—check it out!</Alerts>
<Alerts attrAlert={{color:'secondary dark'}} >This is a light alert—check it out!</Alerts>
<Alerts attrAlert={{color:'success dark'}}>This is a success alert—check it out!</Alerts>
<Alerts attrAlert={{color:'info dark'}}>This is a danger alert—check it out!</Alerts>
<Alerts attrAlert={{color:'warning dark'}}>This is a secondary alert—check it out!</Alerts>
<Alerts attrAlert={{color:'danger dark'}}>This is a warning alert—check it out!</Alerts>
<Alerts attrAlert={{color:'light dark'}}>This is a dark alert—check it out!</Alerts>
<Alerts attrAlert={{color:'dark dark'}}>This is a dark alert—check it out!</Alerts>
import {popover,popoverHeader,popoverBody} from 'reactstrap'
<Popover
placement='right'
isOpen={popover}
target='Popover-1'
toggle={Toggle}
>
<PopoverHeader>Popover title</PopoverHeader>
<PopoverBody>
And heres some amazing content. Its very engaging. Right?
</PopoverBody>
</Popover>
import { Btn, ToolTip } from '../../../../AbstractElements';
const Tooltips = (props) => {
const [basictooltip, setbasictooltip] = useState(false);
const toggle = () => setbasictooltip(!basictooltip);
return(
<Btn attrBtn={{color:"primary" , id:"TooltipExample"}} >Hover Me </Btn>
<ToolTip
attrToolTip={{
placement: 'top',
isOpen: basictooltip,
target: 'TooltipExample',
toggle: toggle
}} >
{PopoverTitle}
</ToolTip>
)}
import {Dropdown,DropdownMenu,DropdownItem} from 'reactstrap';
import { Btn } from '../../AbstractElements';
const Dropdowns = (props) => {
return(
<Dropdown>
<Btn attrBtn={{color:"primary" , className:"dropbtn"}} >
Dropdown Button
<span><i className="icofont icofont-arrow-down"></i></span>
</Btn>
<DropdownMenu className="dropdown-content">
<DropdownItem href="#">Action </DropdownItem>
<DropdownItem href="#">Another Action </DropdownItem>
<DropdownItem href="#">Something Else Here </DropdownItem>
</DropdownMenu>
</Dropdown>
)
}
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting,remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting,remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum
const TabsExample = (props) => {
const [BasicTab, setBasicTab] = useState('1');
const [dropdownOpen, setDropdownOpen] = useState(false);
const toggle = () => setDropdownOpen(prevState => !prevState);
return(
<CardBody>
<Nav tabs>
<NavItem>
<NavLink href="#javascript" className={BasicTab === '1' ? 'active' : ''} onClick={() => setBasicTab('1')}>Home</NavLink>
</NavItem>
<Dropdown className="nav-item" isOpen={dropdownOpen} toggle={toggle}>
<NavItem>
<DropdownToggle className="nav-link" tag="a" href="#javascript" color="default" caret>
Dropdown
</DropdownToggle>
<DropdownMenu>
<NavLink href="#javascript" className={BasicTab === '2' ? 'active' : ''} onClick={() => setBasicTab('2')}>Action</NavLink>
<DropdownItem href="#javascript" >Another action</DropdownItem>
<DropdownItem href="#javascript">Something else here</DropdownItem>
<DropdownItem divider/>
<DropdownItem href="#javascript">Separated link</DropdownItem>
</DropdownMenu>
</NavItem>
</Dropdown>
<NavItem>
<NavLink href="#javascript" className={BasicTab === '3' ? 'active' : ''} onClick={() => setBasicTab('3')}>Profile</NavLink>
</NavItem>
<NavItem>
<NavLink href="#javascript" className={BasicTab === '4' ? 'active' : ''} onClick={() => setBasicTab('4')}>Contact</NavLink>
</NavItem>
</Nav>
<TabContent activeTab={BasicTab}>
<TabPane className="fade show" tabId="1">
<p attrPara={{ className:"mb-0 m-t-30"}} >Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</p>
</TabPane>
<TabPane tabId="2">
<p attrPara={{ className:"mb-0 m-t-30"}} >Lorem Ipsum is 111 simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</p>
</TabPane>
<TabPane tabId="3">
<p attrPara={{ className:"mb-0 m-t-30"}} >Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</p>
</TabPane>
<TabPane tabId="4">
<p attrPara={{ className:"mb-0 m-t-30"}} >Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</p>
</TabPane>
</TabContent>
</CardBody>
)
}
import {Accordion} from 'react-bootstrap'
<Accordion defaultActiveKey="0">
<Accordion.Toggle className="btn btn-link" color="default" eventKey="0">
Collapsible Group Item #<span className="digits">1</span>
</Accordion.Toggle>
<Accordion.Collapse eventKey="0">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.
</Accordion.Collapse>
<Accordion.Toggle className="btn btn-link" color="default" eventKey="1">
Collapsible Group Item #<span className="digits">2</span>
</Accordion.Toggle>
<Accordion.Collapse eventKey="1">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.
</Accordion.Collapse>
<Accordion.Toggle className="btn btn-link" color="default" eventKey="2">
Collapsible Group Item #<span className="digits">3</span>
</Accordion.Toggle>
<Accordion.Collapse eventKey="2">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.
</Accordion.Collapse>
</Accordion>
This is an React wrapper library for the React Scrollbar. To use this library you should get familiar with the Perfect Scrollbar documentation as well since this documentation only explains details specific to this wrapper.
npm i react-perfect-scrollbar
import ScrollBar from "react-perfect-scrollbar";
const scrollbarStyles = { borderRadius: 5 }
const Scrollable = () => {
return (
<div className="card-body">
<ScrollBar className="scroll"
options={{ suppressScrollX: true }}
>
<div> <img src = {require('../../assets/images/banner/3.jpg')} alt="girl" className="img-fluid" /></div>
</ScrollBar>
</div>
)
}
Installing and usage
npm i react-toastify
import { ToastContainer,toast } from 'react-toastify'
<CardBody className="btn-showcase">
<Button color="success" onClick={() => toast.success("Success Notification !")}>
Success Notification
</Button>
</CardBody>
<ToastContainer />
Installing and usage
npm i reactour
import Tour from 'reactour';
const steps = [
{
selector: '.step1',
content: 'This is Profile image',
},
]
const Tours = (props) => {
const [opentour,setopentour] = useState(true)
const closeTour = () => {
setopentour(false);
};
return(
<Tour steps={steps} isOpen={opentour} onRequestClose={closeTour} />
<div className="avatar">
<Media body className="step1" alt="" src={require("../../assets/images/user/7.jpg")} data-intro="This is Profile image" />
</div>
)
}
Installing and usage
npm i react-ratings-declarative
import Rating from 'react-rating'
const [rating,setRating] = useState(5);
}
const Ratingss = (props) => {
return (
<Rating
initialRating={rating}
emptySymbol="fa fa-star-o fa-2x"
fullSymbol="fa fa-star fa-2x"
onChange={(rate) => setRating(rate)}
/>
);
}
Installing and usage
npm i reactstrap
import { Pagination, PaginationItem, PaginationLink } from 'reactstrap';
<Pagination aria-label="Page navigation" className="pagination-primary">
<PaginationItem>
<PaginationLink href="#">
Previous
</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink href="#">
1
</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink href="#">
2
</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink href="#">
3
</PaginationLink>
</PaginationItem>
<PaginationItem>
<PaginationLink href="#">
Next
</PaginationLink>
</PaginationItem>
</Pagination>
Installing and usage
npm i sweetalert2
import SweetAlert from 'sweetalert2'
const Sweetalert = (props) => {
return (
<CardBody className="btn-showcase">
<Button color="primary" className="sweet-1" onClick={() => SweetAlert.fire({title:"Hello world!"})}>Basic</Button>
<CardBody>
)
}
Installing and usage
npm i react-range
import React from 'react'
import InputRange from 'react-range'
const RangeSlider = () => {
const STEP = 1;
const MIN = 0;
const MAX = 20;
const [values1, setValues1] = useState([10]);
return (
<Range
values={values1}
step={STEP}
min={MIN}
max={MAX}
onChange={(values1) => setValues1(values1)}
renderTrack={({ props, children }) => (
<div
onMouseDown={props.onMouseDown}
onTouchStart={props.onTouchStart}
style={{
...props.style,
height: "36px",
display: "flex",
width: "100%"
}}
>
<output style={{ marginTop: "30px" }}>
0
</output>
<div
ref={props.ref}
style={{
height: "5px",
width: "100%",
borderRadius: "4px",
background: getTrackBackground({
values: values1,
colors: ["#7366ff", "#ccc"],
min: MIN,
max: MAX
}),
alignSelf: "center"
}}
>
{children}
</div>
<output style={{ marginTop: "30px" }}>
20
</output>
</div>
)}
renderThumb={({ props, isDragged }) => (
<div
{...props}
style={{
...props.style,
height: "42px",
width: "42px",
borderRadius: "4px",
backgroundColor: "#FFF",
display: "flex",
justifyContent: "center",
alignItems: "center",
boxShadow: "0px 2px 6px #AAA"
}}
>
<div
style={{
height: "16px",
width: "5px",
backgroundColor: isDragged ? "#7366ff" : "#CCC"
}}
/>
</div>
)}
/>
)
}
Installing and usage
npm i react-image-crop
import ReactCrop from "react-image-crop";
import "react-image-crop/dist/ReactCrop.css";
const Example = () => {
const [crop, setCrop] = useState({ unit: '%', width: 30, aspect: 16 / 9 });
return(
<ReactCrop
src={src}
crop={crop}
onImageLoaded={onImageLoaded}
onComplete={onCropComplete}
onChange={onCropChange}
/>
)
}
Installing and usage
npm i react-dragula
import dragula from 'react-dragula';
import 'node_modules/react-dragula/dist/dragula.css';
const DragAndDrop = (props) => {
const dragulaDecorator = (componentBackingInstance) => {
if (componentBackingInstance) {
let options = {};
dragula([componentBackingInstance], options);
}
};
return (
<Container ref={dragulaDecorator}>
<div>Swap me around</div>
<div>Swap her around</div>
<div>Swap him around</div>
<div>Swap them around</div>
<div>Swap us around</div>
<div>Swap things around</div>
<div>Swap everything around</div>
</Container>
)
}
Installing and usage
npm i react-dropzone-uploader
import Dropzone from 'react-dropzone-uploader'
import 'react-dropzone-uploader/dist/styles.css'
const Dropzones = () => {
// specify upload params and url for your files
const getUploadParams = ({ meta }) => { return { url: 'https://httpbin.org/post' } }
// called every time a file's `status` changes
const handleChangeStatus = ({ meta, file }, status) => { console.log(status, meta, file) }
// receives array of files that are done uploading when submit button is clicked
const handleSubmit = (files) => { console.log(files.map(f => f.meta)) }
return (
<Dropzone
getUploadParams={getUploadParams}
onChangeStatus={handleChangeStatus}
onSubmit={handleSubmit}
accept="image/*,audio/*,video/*"
multiple={false}
canCancel={false}
/>
)
}
Installing and usage
npm i react-files
import Files from 'react-files'
const UploadImage = () => {
const [files, setFiles] = useState([]);
function deleteFile(e) {
setFiles([]);
return files
}
const onFilesChange = (files) => {
setFiles(files)
}
const onFilesError = (error, file) => {
setFiles(file)
}
return (
<Files
className='files-dropzone fileContainer'
onChange={onFilesChange}
onError={onFilesError}
accepts={['image/*']}
multiple={false}
maxFileSize={10000000}
minFileSize={0}
clickable
>
{
files.length > 0
? <div className='files-gallery'>
{files.map((file,index) =>
<img className='files-gallery-item' alt="img" src={file.preview.url} key={index} />
)}
</div>
: <div className="d-flex justify-content-center">
<button className="chooseFileButton me-2">Upload Image</button>
</div>
}
</Files>
)
}
Installing and usage
npm i react-datepicker
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
const Example = () => {
const [startDate,setstartDate] = useState(new Date())
const handleChange = date => {
setstartDate(date);
};
return (
<Cardbody>
<DatePicker
className="form-control digits"
selected={startDate}
onChange={handleChange} />
</Cardbody>
);
}
Installing and usage
npm i react-bootstrap-typeahead
import { Typeahead } from 'react-bootstrap-typeahead';
import 'react-bootstrap-typeahead/css/Typeahead.css';
const Example = () => {
const [multiple, setMultiple] = useState(false);
return(
<Cardbody>
<Typeahead
id="basic-typeahead"
labelKey="name"
multiple={multiple}
options={options}
placeholder="Choose a state..."
/>
</Cardbody>
)
}
Installing and usage
npm i react-apexcharts
/* Basic ApexData.jsx */
export const apexchartsexample = {
series: [{
name: 'series1',
data: [31, 40, 28, 51, 42, 109, 100]
}, {
name: 'series2',
data: [11, 32, 45, 32, 34, 52, 41]
}],
options: {
chart: {
height: 350,
type: 'area'
},
dataLabels: {
enabled: false
},
stroke: {
curve: 'smooth'
},
xaxis: {
type: 'datetime',
categories: ["2018-09-19T00:00:00.000Z", "2018-09-19T01:30:00.000Z", "2018-09-19T02:30:00.000Z", "2018-09-19T03:30:00.000Z", "2018-09-19T04:30:00.000Z", "2018-09-19T05:30:00.000Z", "2018-09-19T06:30:00.000Z"]
},
tooltip: {
x: {
format: 'dd/MM/yy HH:mm'
},
},
colors:["#7366ff", "#f73164"]
},
};
import Chart from 'react-apexcharts'
import {apexchartsexample} from './ApexData'
const Apexcharts = (props) => {
return (
<CardBody>
<Chart options={apexchartsexample.options} series={apexchartsexample.series} type="area" height={350} />
</CardBody>
);
}
}
Installing and usage
npm i react-google-charts
import React from 'react';
import { GoogleChart } from "react-google-charts";
const GoogleCharts = (props) => {
return (
<GoogleChart
width={'100%'}
height={'400px'}
chartType="PieChart"
loader={<div>Loading Chart</div>}
data={[
['Task', 'Hours per Day'],
['Work', 6.7],
['Eat', 13.3],
['Commute', 20],
['Watch TV', 26.7],
['Sleep', 33.3],
]}
options={{
title: 'My Daily Activities',
colors: ["#51bb25", "#7366ff", "#f73164", "#148df6", "#ff5f24"]
}}
rootProps={{ 'data-testid': '1' }}
/>
);
}
Installing and usage
npm i knob
import React from 'react';
import Knob,{useEffect} from "knob";
const KnobChart = () => {
useEffect(() => {
var exampleknob = Knob({
value: 35,
left: 1,
angleOffset: 90,
className: "review",
thickness: 0.1,
fgColor: "#7366ff",
readOnly: true,
dynamicDraw: true,
tickColorizeValues: true,
bgColor: '#f73164',
lineCap: 'round',
displayPrevious:false
})
document.getElementById('profit').appendChild(exampleknob);
},[])
return(
<div className="knob-block text-center">
<div className="knob" id="profit">
</div>
</div>
)
}
Installing and usage
npm i react-chartjs-2
/* chartData.jsx */
export const Data = {
labels: ['Mon', 'Tue', 'Wen', 'Thus', 'Fri', 'Sat', 'Sun'],
datasets: [
{
label: 'y',
lagend: 'y',
data: [35, 59, 80, 81, 56, 55, 40],
borderColor: "#7366ff",
backgroundColor: "rgba(145, 46, 252, 0.4)",
highlightFill: "rgba(145, 46, 252, 0.4)",
highlightStroke: "#7366ff",
borderWidth: 2
},
{
label: 'z',
lagend: 'z',
data: [28, 48, 40, 19, 86, 27, 90],
borderColor: "#f73164",
backgroundColor: "rgba(247, 49, 100, 0.4)",
highlightFill: "rgba(247, 49, 100, 0.4)",
highlightStroke: "#f73164",
borderWidth: 2
}
],
plugins: {
datalabels: {
display: false,
color: 'white'
}
}
}
export const Options = {
maintainAspectRatio: true,
legend: {
display: false,
},
plugins: {
datalabels: {
display: false,
}
}
}
import { Bar } from 'react-chartjs-2';
import { Data,Option} from './chartData';
const ChartjsExample = () => {
return(
<Cardbody>
<Bar
data={Data}
width={778}
height={400}
options={Options}
/>
</Cardbody>
)
}
Installing and usage
npm i react-chartist
import ChartistGraph from 'react-chartist';
const Chartist = (props) => {
return (
<Cardbody>
<ChartistGraph
key="1"
className="ct-6 flot-chart-container"
data={{
labels: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
series: [[12, 9, 7, 8, 5, 4, 6, 2, 3, 3, 4, 6],
[4, 5, 3, 7, 3, 5, 5, 3, 4, 4, 5, 5],
[5, 3, 4, 5, 6, 3, 3, 4, 5, 6, 3, 4],
[3, 4, 5, 6, 7, 6, 4, 5, 6, 7, 6, 3]]
}} type={'Line'} listener={{
"draw": function (data) {
if (data.type === 'line' || data.type === 'area') {
data.element.animate({
d: {
begin: 2000 * data.index,
dur: 2000,
from: data.path.clone().scale(1, 0).translate(0, data.chartRect.height()).stringify(),
to: data.path.clone().stringify(),
}
});
}
}
}}
options={chart1}
/>
</Cardbody>
)
}
}
Installing and usage
npm i react-google-maps
import { withGoogleMap, GoogleMap, withScriptjs } from "react-google-maps";
const MapContainer = () => {
const[location,setlocation] = useState({ address: false,
mapPosition: {
lat: 18.5204, lng: 73.8567
},
markerPosition: {
lat: 18.5204, lng: 73.8567
}
})
const BasicMap = withScriptjs(
withGoogleMap(
props => (
<GoogleMap google={props.google}
defaultZoom={15}
defaultCenter={{ lat: location.mapPosition.lat, lng: location.mapPosition.lng }}
>
</GoogleMap>
)
)
);
return (
<CardBody>
<BasicMap
googleMapURL="https://maps.googleapis.com/maps/api/js?key=Yourkey&libraries=places"
loadingElement={
<div style={{ height: `100%` }} />
}
containerElement={
<div style={{ height: '300px' }} />
}
mapElement={
<div style={{ height: `100%` }} />
}
/>
</CardBody>
)
}
Installing and usage
npm i react-leaflet
import { Map as LeafletMap, TileLayer, GeoJSON, Marker, Popup } from 'react-leaflet';
import WorldData from 'world-map-geojson';
const LeafletMap = () => {
return(
<div id="gmap-simple" >
<LeafletMap
center={[50, 10]}
zoom={6}
maxZoom={10}
attributionControl={true}
zoomControl={true}
doubleClickZoom={true}
scrollWheelZoom={true}
dragging={true}
animate={true}
easeLinearity={0.35}
>
<TileLayer url='http://{s}.tile.osm.org/{z}/{x}/{y}.png' />
<Marker position={[50, 10]}>
<Popup>
Popup for any custom information.
</Popup>
</Marker>
</LeafletMap>
</div>
)
}
Installing and usage
npm i react-ckeditor-component
import CKEditors from "react-ckeditor-component";
const [content,setContent] = useState('content')
const onChange = (evt) => {
const newContent = evt.editor.getData();
setContent(newContent)
}
const Editor = () => {
return (
<CKEditors
activeclassName="p10"
content={content}
events={{
"change": onChange
}}
/>
)
}
Installing and usage
npm i react-simplemde-editor
import SimpleMDE from "react-simplemde-editor";
const [text,setText] = useState(`Enter text in the area on the left. For more info, click the ? (help) icon in the menu.`)
const handleChange = () => {
setText("Enter text in the area on the left. For more info, click the ? (help) icon in the menu.")
}
const MdeEDitor = () => {
return (
<SimpleMDE
id="editor_container"
onChange={handleChange}
value={text}
options={{
autofocus: true,
spellChecker: false
}}
/>
)
}
Installing and usage
npm i react-ace
import AceEditor from "react-ace";
import "ace-builds/webpack-resolver";
import "ace-builds/src-noconflict/theme-monokai";
const AceCodeEditor = () => {
return (
<AceEditor
mode="javascript"
theme="monokai"
fontSize={14}
showPrintMargin={true}
showGutter={true}
highlightActiveLine={true}
height="100%"
width="100%"
value={`
/* Sample JavaScript edit source */
// Define a module
var app = angular.module('app', ['ui.bootstrap']);
// Define a conroller.
app.controller('GrokController', ['$scope', '$filter',
function($scope, $filter) {
$scope.today = function() {
$scope.dt = new Date();
};
$scope.today();
$scope.isOpened = false;
$scope.open = function($event) {
$event.preventDefault();
$event.stopPropagation();
$scope.isOpened = true;
};
}]);
/* End of sample edit source */`}
editorProps={{ $blockScrolling: true }}
setOptions={{
showLineNumbers: true,
tabSize: 1,
}}
/>
)
}