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
Input | Type | Description |
---|---|---|
None | - | Method is called without parameters |
Output | Type | Description |
---|---|---|
Returns | React.Component | React 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.