📦 Description
The 'Handler' Component is like React.Fragment and you can add React composite events and you can get a DOM reference by ref
📦 Installation
npm install handler-fragment
🔨 Usage
/**OutSide Demo1**/
import {OutSide} from 'handler-fragment';
function MyComponent() {
return (
<OutSide
onOutSideClick={() => {
alert('You clicked outside of this component!!!');
}}
>
<span>Hello World</span>
</OutSide>
);
}
/**OutSide Demo2**/
import {FocusWithin} from 'handler-fragment';
/**
* FocusWithin It's very similar to the Pseudo class :focus-within
*
* when you focus the input you will find the div will add class ‘is-focus’
*and then when you blur you will find the div will remove class ‘is-focus’
**/
function MyComponent2() {
return (
<FocusWithin>
<div><input/></div>
</FocusWithin>
);
}
/**Handler Demo3**/
import {Handler} from 'handler-fragment';
/**
* The function of the handler is to render not only children, but also click events in the proxy children
* It is equivalent to rendering < div > {children} < / div > but deleting the div after the first rendering
**/
function MyComponent3() {
return (
<Handler
ref={(ref)=>{
console.log('You will get the divs ref !!!');
}}
onClick={(e)=>{
console.log('any event you can add to handler ');
}}
>
<div>123</div>
</Handler>
);
}
🖥 API
FocusWithin
interface FocusWithinProps {
children: React.ReactElement;
focusClassName?: string;
disabled?: boolean;
}
export default class FocusWithin extends React.PureComponent<FocusWithinProps> {
static defaultProps: {
focusClassName: string;
};
render(): React.ReactNode;
}
Handler
interface HandlerProps extends React.DOMAttributes<HTMLElement> {
children: React.ReactElement;
disabled?: boolean;
onBeforeReplace?: (current: HTMLElement) => void;
onAfterReplace?: () => void;
}
export default class Handler extends React.PureComponent<HandlerProps> {
constructor(props: HandlerProps);
render(): React.ReactNode;
}
FocusWithin
interface OutSideProps {
children?: JSX.Element;
onOutSideClick?: (e: React.MouseEvent) => void;
onClick?: (e: React.MouseEvent) => void;
onMouseEnter?: (e: React.MouseEvent) => void;
onMouseLeave?: (e: React.MouseEvent) => void;
onFocus?: (e: React.FocusEvent) => void;
onBlur?: (e: React.FocusEvent) => void;
triggerTiming?: 'inner' | 'outside';
once: boolean;
}
export default class OutSide extends React.Component<OutSideProps> {
static defaultProps: {
triggerTiming: string;
once: boolean;
};
render(): React.ReactNode;
}