Skip to content

gjc9620/react-string-template

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

24 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

react-string-template

react-string-template is simple string template with react

install

npm i --save react-string-template

  <ReactStringTemplate
    str={"{name} is a series of {foo} novels written by British author {author} in {yeah}."}
    renderNoMatch={()=>'not match'}
    values={{
      name: <a href="https://www.google.com/search?q=Harry Potter" key='potter'>Harry Potter</a>,  // Don't forget write key
      foo: 'fantasy',
      bar: 'novels',
      author: 'J. K. Rowling',
      yeah: 1997,
    }} >
    {(children)=><div>{children}</div>}
  </ReactStringTemplate>

  //Harry Potter is a series of fantasy novels written by British {author} J. K. Rowling in 1997.
  // add click event
  <ReactStringTemplate
    str={"{charmName} Charm"}
    values={{
      charmName: (
        <span
          key='patronus'
          onClick={()=>alert('Patronus!')}>
          Patronus
        </span>
      ),
    }} >
    {(children)=><div>{children}</div>}
  </ReactStringTemplate>
  // render no Match
  <ReactStringTemplate
    str={"I am {name}"}
    renderNoMatch={()=>'not match'} >
    {(children)=><div>{children}</div>}
  </ReactStringTemplate>

  //I am not match

If you don't need escape use {{escape}}

About

πŸš€ simple string template with react! πŸš€

Topics

Resources

Stars

Watchers

Forks

Packages

No packages published