Skip to content

gjc9620/react-string-template

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Dec 22, 2018
080dfe8 Β· Dec 22, 2018

History

24 Commits
Dec 22, 2018
Dec 20, 2018
Dec 19, 2018
Dec 20, 2018
Dec 15, 2018
Dec 15, 2018
Dec 22, 2018
Dec 22, 2018
Dec 15, 2018
Dec 22, 2018

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