How to use react-spaces - 10 common examples

export const LayersDemo = () => {
	const [ fixedSideBarHovered, setFixedSideBarHovered ] = React.useState(false);
	const [ floatingSideBarHovered, setFloatingSideBarHovered ] = React.useState(false);
	const [ showLayer1, setShowLayer1 ] = React.useState(true);
	const [ showLayer2, setShowLayer2 ] = React.useState(false);

	return (
		
			
				<label><input checked="{showLayer1}" type="checkbox"> setShowLayer1(e.target.checked)} /&gt; Show layer 1</label>
				<label><input checked="{showLayer2}" type="checkbox"> setShowLayer2(e.target.checked)} /&gt; Show layer 2</label>
			
			

				{ showLayer1 &amp;&amp; 
					

						 setFixedSideBarHovered(true)} 
							onMouseLeave={() =&gt; setFixedSideBarHovered(false)} 
							as="nav"&gt;
							{Description("Left fixed (zIndex = 0)")}

export const Pinnable = () => {
    const [leftOpen, setLeftOpen] = React.useState(false);
    const [leftPinned, setLeftPinned] = React.useState(false);
    const [rightOpen, setRightOpen] = React.useState(false);
    const [rightPinned, setRightPinned] = React.useState(false);
  
    return (
      <>
        
          
            
              <button> setLeftOpen(prev =&gt; !prev)}&gt;
                {leftOpen ? "Close" : "Open"}
              </button>
              {leftOpen &amp;&amp; (
                <button> setLeftPinned(prev =&gt; !prev)}&gt;
                  {leftPinned ? "Unpin" : "Pin"}
                </button>
              )}
            
            
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab incidunt
            commodi id doloremque inventore laudantium maxime saepe veritatis,
            dolorem labore magnam. Quod, tempore inventore omnis doloremque
            accusantium commodi ratione dignissimos eos doloribus aliquid
            quibusdam officiis qui porro neque modi, fugiat iusto suscipit
            perspiciatis? Corporis, necessitatibus quia soluta illum perferendis

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo dicta
            dolore nisi veniam maiores iusto magnam fuga facere ipsum, recusandae,
            reprehenderit quasi illum sequi doloribus molestias. Consectetur qui
            unde dolore odio similique quidem perferendis, eligendi sequi
            recusandae explicabo. Excepturi ratione molestias et temporibus
            perferendis vitae ab voluptatum repellat corporis assumenda.
            
          
          
            
            <button> setRightOpen(prev =&gt; !prev)}&gt;
              {rightOpen ? "Close" : "Open"}
            </button>
            {rightOpen &amp;&amp; (
              <button> setRightPinned(prev =&gt; !prev)}&gt;
                {rightPinned ? "Unpin" : "Pin"}
              </button>
            )}
            
            
              Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iure,
              inventore! Deserunt quasi hic atque natus quod totam. Quia molestias
              obcaecati quibusdam illum sint dolorem doloremque eos unde natus
              nesciunt officia corrupti recusandae ipsam, accusamus, sed amet optio
              numquam minima eaque inventore enim esse. Natus saepe laboriosam dolor
              magnam at illo.

const BottomPane : React.FC<{ toggleVisibility: () => void, toggleSize: () => void }> = (props) => {
	return (
		
			<button>Toggle sidebar visibility</button>
			<button>Toggle sidebar size</button>
		
	)
}

const [ html, setHtml ] = React.useState('');
	const [ loading, setLoading ] = React.useState(true);
	const [ sidebarSize, setSidebarSize] = React.useState(250);

	React.useEffect(() => {
		(async () => {
			setLoading(true);
			const response = await fetch('https://baconipsum.com/api/?type=all-meat¶s=20&start-with-lorem=1&format=html');
			setHtml(await response.text());
			setLoading(false);
		})();
	}, [selectedKey]);

	return (
	
		
			Header
		
		
			 { setSidebarSize(newSize);}} handleSize={30}>
				<menu> setSelectedKey(e.key)}&gt;
					Menu item 1
					Menu item 2
					Menu item 3
				</menu>
			
			
				{
					loading ? 
						<br>Loading stuff :
						<div>
							<h2>Some heading</h2>
</div>

props.showSpaces ?
								<a title="Show space borders"> props.setShowSpaces(!props.showSpaces)}&gt;
									<i>
									<span>Hide</span>
								</i></a><i> :
								<a title="Hide space borders"> props.setShowSpaces(!props.showSpaces)}&gt;
									<i>
									<span>Highlight</span>
								</i></a><i>
						}
						<a title="View code">
							<i>
							<span>Code</span>
						</i></a><i>
					
					
						<a title="View code"> props.setSidebarVisible(!props.sidebarVisible)}&gt;
							<i>
							<span>Hide</span>
						</i></a><i>
					</i><i>
				
			 :
			null
	)
}

</i></i></i></i>

Positioned spaces used to create resizable / draggable floating windows
								
							
						
						<li>
							<a> props.setSelectedDemo("codeeditor" )}&gt;
								Code editor
								<span>
									A code editor interface with docked panels, menu bars and tabs
								</span>
							</a>
						</li>
					
				
				
					
						{
							props.showSpaces ?
								<a title="Show space borders"> props.setShowSpaces(!props.showSpaces)}&gt;
									<i>
									<span>Hide</span>
								</i></a><i> :
								<a title="Hide space borders"> props.setShowSpaces(!props.showSpaces)}&gt;
									<i>
									<span>Highlight</span>
								</i></a><i>
						}
						<a title="View code">
							<i>
							<span>Code</span>
						</i></a><i>
					</i></i></i><i><i><i>
</i></i></i>

const WindowInner : React.FC<{ onClick?: () => void }> = (props) => {
    const parentSpace = Space.useParentSpace();

    return (
        <>
             { props.onClick && props.onClick(); parentSpace.startDrag(); }} size={40}>
                {Description(`Window title`)}
            
            
                {Description(`Window content`)}
            
        
    )
}

const Header = () => {
	return (
		
			
			UI Demo - Example UI interface
		
	)
}

const WindowInner : React.FC<{ onClick?: () => void }> = (props) => {
    const parentSpace = Space.useParentSpace();

    return (
        <>
             { props.onClick && props.onClick(); parentSpace.startDrag(); }} size={40}>
                {Description(`Window title`)}
            
            
                {Description(`Window content`)}
            
        
    )
}