Product
Introducing License Enforcement in Socket
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
@zeejs/react
Advanced tools
zeejs React - simple API to create multi layered UI
This document describes the zeejs React usage, For a more in depth overview of zeejs
, please see the general documentation.
<Root>
componentAt the base of the application or website place the <Root>
component. The Root component is responsible for collecting, rendering and managing the layers.
Notice that Root is required for zeejs to work properly.
props:
name | type | default | required | description |
---|---|---|---|---|
className | string | "" | false | CSS class name to be placed on the wrapper element around all layers |
style | React.CSSProperties | {} | false | CSS styles to be placed on the wrapper element around all layers |
code example:
import { Root } from '@zeejs/react';
ReactDOM.render(
<Root className="app-root" style={{ height: `100%` }}>
{/* application code */}
</Root>
);
will output:
<div class="app-root" style="height: 100%">
<zeejs-layer>
<!-- application code -->
</zeejs-layer>
</div>
<Layer>
componentAt every point that requires a part of the DOM to be moved up the normal layout flow and out of any overflows, a <Layer>
component can be placed. The Layer is the low level primitive of zeejs that takes any given content and renders it in its own layer.
The component will generate a new zeejs layer above layer it is rendered in.
props:
name | type | default | required | description |
---|---|---|---|---|
backdrop | "none" | "block" | "hide" | "none" | false | background behavior; see docs |
overlap | "window" | HTMLElement | "window" | false | layer bounds reference |
onClickOutside | (target: EventTarget) => void | false | invoked on click outside; see docs | |
onMouseIntersection | (isInside: boolean) => void | false | invoked when mouse leaves or enters layer; see docs | |
onFocusChange | (isFocused: boolean) => void | false | invoked when focus is moved into/out of layer; see docs | |
onEscape | (event: KeyboardEvent) => void | false | invoked when escape is pressed; see docs |
code example:
import { Layer } from '@zeejs/react';
const Component = () => {
return (
<div>
<Layer>{/* layer content */}</Layer>
</div>
);
};
will output (assuming render in the application layer):
<div>
<zeejs-layer>
<!-- application code containing layer component -->
</zeejs-layer>
<zeejs-layer style="/* bound to window or reference element */">
<!-- layer content -->
</zeejs-layer>
</div>
nesting code example:
import { Layer } from '@zeejs/react';
const Component = () => {
return (
<div>
<Layer>
<div>
{/* layer A content*/}
<Layer>{/* layer B content */}</Layer>
</div>
</Layer>
</div>
);
};
will output (assuming render in the application layer):
<div>
<zeejs-layer>
<!-- application code containing layer component -->
</zeejs-layer>
<zeejs-layer>
<!-- layer A content -->
</zeejs-layer>
<zeejs-layer>
<!-- layer B content -->
</zeejs-layer>
</div>
<Modal>
componentThe modal primitive display content that is not affected by the scroll of lower layers.
props:
name | type | default | required | description |
---|---|---|---|---|
backdrop | "none" | "block" | "hide" | "block" | false | background behavior; see docs |
position | "topLeft" | "top" | "topRight" | "left" | "center" | "right" | "bottomLeft" | "bottom" | "bottomRight" | "center" | false | fixed align position |
show | boolean | true | false | flag if the layer should be displayed |
onClickOutside | (target: EventTarget) => void | false | invoked on click outside; see docs | |
onMouseIntersection | (isInside: boolean) => void | false | invoked when mouse leaves or enters layer; see docs | |
onFocusChange | (isFocused: boolean) => void | false | invoked when focus is moved into/out of layer; see docs | |
onEscape | (event: KeyboardEvent) => void | false | invoked when escape is pressed; see docs | |
className | string | "" | false | CSS class name to add to the modal box |
style | React.CSSProperties | {} | false | CSS inline style to add to the modal box |
<Tooltip>
componentThe tooltip primitive displays hovered content that is bound to the UI that opened it, usually used to label or describe it.
props:
name | type | default | required | description |
---|---|---|---|---|
mouseDelay | number | 500 | delay for mouse out / in | |
positionX | "before" | "start" | "center" | "end" | "after" | "center" | false | align X position |
positionY | "before" | "start" | "center" | "end" | "after" | "before" | false | align X position |
<Popover>
componentThe modal primitive display content that is not affected by the scroll of lower layers while being bound to the UI the opened it.
props:
name | type | default | required | description |
---|---|---|---|---|
backdrop | "none" | "block" | "hide" | "block" | false | background behavior; see docs |
positionX | "before" | "start" | "center" | "end" | "after" | "center" | false | align X position |
positionY | "before" | "start" | "center" | "end" | "after" | "after" | false | align Y position |
avoidAnchor | boolean | false | false | attempt to not overlap the anchor that opened it while pushed in by overflow |
matchWidth | boolean | false | false | force the popover box to be in the width of the anchor |
matchHeight | boolean | false | false | force the popover box to be in the height of the anchor |
show | boolean | true | false | flag if the layer should be displayed |
onClickOutside | ((target: EventTarget) => void | false | invoked on click outside; see docs | |
ignoreAnchorClick | boolean | false | false | when true click on anchor does not invoke onClickOutside handler |
onMouseIntersection | (isInside: boolean) => void | false | invoked when mouse leaves or enters layer; see docs | |
onFocusChange | (isFocused: boolean) => void | false | invoked when focus is moved into/out of layer; see docs | |
onEscape | (event: KeyboardEvent) => void | false | invoked when escape is pressed; see docs | |
onDisplayChange | (isPositioned: boolean) => void | false | invoked when the popover is displayed (after positioning) or removed from DOM | |
className | string | "" | false | CSS class name to add to the popover box |
style | React.CSSProperties | {} | false | CSS inline style to add to the popover box |
FAQs
React layering
The npm package @zeejs/react receives a total of 425 weekly downloads. As such, @zeejs/react popularity was classified as not popular.
We found that @zeejs/react demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
Product
We're launching a new set of license analysis and compliance features for analyzing, managing, and complying with licenses across a range of supported languages and ecosystems.
Product
We're excited to introduce Socket Optimize, a powerful CLI command to secure open source dependencies with tested, optimized package overrides.