Nabbing Pleasant Monads

    @composi/render-to-string

    0.5.7 • Public • Published

    @composi/render-to-string

    A function to convert a @composi/core functional component into a string of HTML markup for use on the server. Using this instead of the @composi/core render function allows you to render components into an html page on the server.

    Install

    npm i -D @composi/render-to-string

    Import into Project

    This is a CommonJS module for use with Node, so import it like any Node module:

    const renderToString = require('@composi/render-to-string')

    Usage

    To use renderToString you need two things, state and a functional component. You need to capture the result in a variable so that you can concatenate or inject it into the markup for the page the server will generate.

    // A component to render:
    function Title({greeting, title}) {
      return (
        <nav class={title}>
          <h1 class="header--main">Hello, {greeting}!</h1>
        </nav>
      )
    }
    
    // Convert component into html string:
    const renderedTitle = renderToString(<Title greeting='World' />)

    It's assumed that you would be using this to get a faster page load. But after loading, you would enliven said content with @composi/core components.

    Gotcha

    When defining values for props, particular inline events, be aware that any values that you use should be quoted using double quotes. That's because all prop values, including events, get enclosed in single quotes.

    Install

    npm i @composi/render-to-string

    DownloadsWeekly Downloads

    0

    Version

    0.5.7

    License

    MIT

    Unpacked Size

    12.8 kB

    Total Files

    11

    Last publish

    Collaborators

    • wobba