npm ImageReact Image Accordion

install
npm i react-image-accordion
import
import { ReactImageAccordion } from "react-image-accordion";
use
< ReactImageAccordion

accordionData={accordionData}
AccordionWidth={AccordionWidth}
AccordionHeight={AccordionHeight}
ContentSize=[ContentSize]
onClick={}
ShowButton={True/false}

/>

npm ImageVideo all caption

install
npm i react-video-all-caption
import
import { ReactVideoPlayer } from "react-video-all-caption";
use
< ReactVideoPlayer >

videopath="https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4"
autoplay = {true}
captionurl= "/srtCaption.srt" // ./sbvCaption.sbv // ./vttCaption.vtt
embedurl= ""
loop= {true}
muted= {true}
playPause= {true}
type= "videoPath"
control= {true}

< /ReactVideoPlayer >

npm ImageJSON-pretty-textarea

install
npm i json-pretty-textarea
import
import { JsonPrettierTextarea } from "json-pretty-textarea";
use
< JsonPrettierTextarea

prettyjson={MockDocument}
preBcl="white"
stringCl="blue"
numberCl="blue"
booleanCl="red"
nullCl="violet"
keyCl="red"
string_font_size="1rem"
number_font_size="1rem"
boolean_font_size="1rem"
null_font_size="1rem"
key_font_size="1rem"
height="300px"
width="300px"
borderRadius="10px"

/>

npm ImageProgressBar-Chart

install
npm i progressbar-chart
import
import { ProgressBar } from "progressbar-chart";
use
< ProgressBar

Data={SkillsArray}
DataName="skillName"
DataPercentage="skillPercentage"
height="0.8rem"
borderRadius="0.8rem"
background="linear-gradient(to left,rgba(54, 162, 235, 1),rgba(54, 162, 235, 0.2))"
boxShadow=" 0 3px 3px -5px rgba(54, 162, 235, 0.8),0 2px 5px rgba(54, 162, 235, 0.5)"
color="rgb(0, 0, 0)"

/>

npm ImageSkills-Radar-Chart

install
npm i skills-radar-chart
import
import { RadarChart } from "skills-radar-chart";
use
< RadarChart

rawData={SkillsArray}
skillPercentage="skillPercentage"
skillName="skillName"
label="Skills"
backgroundColor="rgba(255, 99, 132, 0.2)"
borderColor={["blue", "red", "green", "yellow" ]}
borderWidth="5"
pointBackgroundColor="rgb(54, 162, 235)"
pointBorderColor={["blue", "red", "green","yellow" ]}
pointHoverBackgroundColor="#fff"
pointHoverBorderColor="rgb(54, 162, 235)"
borderDash={[ 2 , 5 ]}
borderDashOffset="8"
angleLines="rgba(255, 99, 132, 0.2)"
grid="rgba(255, 99, 132, 0.2)"
pointLabels="rgba(255, 99, 132, 0.2)"
ticks="rgba(255, 99, 132, 0.2)"

/>