JSPM

react-string-template

1.0.2
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 27
  • Score
    100M100P100Q60227F
  • License MIT

Package Exports

  • react-string-template

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-string-template) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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}}