Wrap

Wrapper component for conditional rendering based on Signify state.

Description

The Wrap component provides a way to conditionally render content based on the current state value. It automatically subscribes to state changes and re-renders its children when the state updates.

Input/Output

Input	Type	Description
children	(value: T) => React.JSX.Element	Render function that receives current state

Output	Type	Description
Returns	React.Component	React component that renders based on state

Example

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

const sUser = signify<{ name: string; isLoggedIn: boolean } | null>(null);
const sCounter = signify(0);

function App() {
  return (
    <div>
      {/* Conditional rendering based on user state */}
      <sUser.Wrap>
        {(userData) => (
          userData ? (
            <div>
              <h1>Welcome, {userData.name}!</h1>
              <p>Status: {userData.isLoggedIn ? 'Online' : 'Offline'}</p>
            </div>
          ) : (
            <div>
              <h1>Please log in</h1>
              <button onClick={() => sUser.set({ 
                name: 'John', 
                isLoggedIn: true 
              })}>
                Login
              </button>
            </div>
          )
        )}
      </sUser.Wrap>

      {/* Counter display with Wrap */}
      <sCounter.Wrap>
        {(count) => (
          <div>
            <p>Count: {count}</p>
            <button onClick={() => sCounter.set(count + 1)}>
              Increment
            </button>
          </div>
        )}
      </sCounter.Wrap>
    </div>
  );
}