Skip to content
Advertisement

How to get the value of prop (which could be multi-line) in JSX tag using regex?

I want to get the value of title props from these JSX elements,

      <Story title={'Disabled Text Input'}>
        <TextInput label="Disabled Text Input" disabled />
      </Story>
      <Story 
         title={'Disabled ways for
                 Text Input to work'}>
        <TextInput label="Disabled Text Input" 
          disabled 
          {...someExtraProps}/>
      </Story>

For the above example,

Disabled Text Input

Disabled ways for Text Input to work

I am trying to use regex, using grouping,

I was able to get the children of Story JSX element, using /<Story[^]+?>(?<component>[^$]*?)</Story>/g

but struggling with getting value of the title prop. As it could be in any of the below forms,

title={"some"}
title="Some"
title='Some'
title={'Some'}

Advertisement

Answer

So I did use regex as my first step to the solution. But then I came across this toolbox, React-Docgen which served the exact purpose of extracting information for document generation.

User contributions licensed under: CC BY-SA
2 People found this is helpful
Advertisement