uh Hello friends welcome to this video
so in this video we'll talk about
another reacts Library this time it is
used to display XML files so XML viewer
and editor and if you want to display
XML files inside react CH this will be a
perfect library for you so we have this
choose file button so here the user will
select their XML file and as soon as you
select the XML file you will see it will
show the actual content of the XML file
with syntax highlighting and you can
clearly see the data right here and if
this is a perfect small little library
and if you want to if you're working
with XML files if you want to read and
display XML files in browser using react
chase this Library will be a perfect one
let me show you the name of the library
and if you go to npmjs.com and just
search for this package react XML Das
viewer this is actually the name of the
package the very first package which
comes right here this is the
one so it has got almost 23,000 weekly
downloads so I will show you very simple
example on how to using this this is a
command you need to install
this so I've already installed this so
just type npmi react XML viewer and also
we are using bootstrap as well so so
these three packages you need to
install bootstrap and react bootstrap we
using this also I already installed all
three packages I will start the
development
server and I will start from
scratch so just make a simple app level
component functional
component and for this we need to
import the bootstrap I will just include
that bootstrap is not necessary for for
this tutorial so I got just for staring
purposes so you imported these three
container form alert from react bootst
and also included the CSS file and now
for this application we need to
basically declare two State variables
first to keep track of which XML file
the user has selected so for that we
have this XML content variable and for
this we using the UST State hook which
will be imported then initial value will
be nothing and the second variable will
be for keep track of the any error which
happens again the initial value of this
will be nothing and now in the jsx we
will actually be using a simple
container we will wrap everything using
the container class of
bootstrap and we will just be giving a
class inside this we will have a simple
heading
in the center position and we will
simply say uh react XML
viewer and then we'll have a simple form
uh using this form
group inside this we will have the form
label you simply say that
upload and X XML
file so then we have a
simple input field where we accept the
user input so type is equal to five and
you'll only be accepting XML
files and basically attach a onchange
event handler so when you
actually upload a XML file this function
will get executed so we just need to
Define this
function handle
file e parameter will automatically be
passed this event
parameter
so in inside this function we will
basically get access to the file the
user select by using e. target. files
and then we will have two conditions
just to check if the file is
uploaded so if the file is not uploaded
we will set these error messages is no
file selected and please upload a valid
XML file so if the file is not an XML
file in either of these cases we will
not execute the code so if the file is
correct then it will set the error to
nothing and then we read the XML
whatever file submit by first of all the
file reader API which is built in in
every browser you'll use this and it
actually contains a function you'll read
this file
as read as text and then we have this
method it's a very basic method in order
to read a file we have this onload
function so then we'll simply set the
XML content to be the actual event.
Target
dot result and then if any sort of error
take place this error call back will
happen on error so you set the error
error reading the file so that's all
that we need to do and now to display
that XML file just after the form group
we will display the XML file using that
function using the
module so we simply say if the XML
content is available then in that case
display we'll display it in this div
we'll give it a class name of bootstrap
the margin top four some spacing from
the top and you have the H5 t T XML
content and then we will display the XML
viewer which will be coming from react
XML viewer so you'll see that this is
actual
package and this Al only takes a simple
attribute which is the actual XML that
you want to display and it is available
inside the XML content variable that's
all so if you just refresh your
application just go to the Local Host
and it's a very basic module and just
select and it will display it the XML
you can
see but the module works really well and
if you are working with XML files it's a
great module to display your XML files
in browser using react so thank you very
much for watching this video and to
please hit that like button subscribe to
channel and do check out my website as
well free mediat tools.com which
contains thousands of free tools
regarding audio video and Mage and I
will be seeing you next video