Skip to content

html

Method to render Signify state as HTML content (for string/number types).

Description

The html method is available for Signify instances containing string or number values. It provides a way to render the state value directly as HTML content with automatic updates when the state changes.

Input/Output

InputTypeDescription
None-Method is called without parameters
OutputTypeDescription
ReturnsReact.ComponentReact component that renders the state value

Example

typescript
import { signify } from 'react-signify';
import React from 'react';

const sMessage = signify('Hello World!');
const sCounter = signify(0);
const sHtmlContent = signify('<strong>Bold text</strong>');

function HtmlExample() {
  return (
    <div>
      {/* Render string state as HTML */}
      <div>
        Message: {sMessage.html()}
      </div>
      
      {/* Render number state as HTML */}
      <div>
        Count: {sCounter.html()}
      </div>
      
      {/* Render HTML content */}
      <div 
        dangerouslySetInnerHTML={{ 
          __html: sHtmlContent.value 
        }} 
      />
      
      <div>
        <button onClick={() => sMessage.set('Updated message!')}>
          Update Message
        </button>
        <button onClick={() => sCounter.set(sCounter.value + 1)}>
          Increment Counter
        </button>
        <button onClick={() => sHtmlContent.set('<em>Italic text</em>')}>
          Update HTML
        </button>
      </div>
    </div>
  );
}

Note: The html method is only available for Signify instances with string or number types. For object types, this method is omitted from the type definition.

Released under the MIT License.