react-render-self

Allows children components update state of parent by ref. Set property empty to hide children and/or render something for empty state. Or you can set delay in msec to render component after delay and/or render something while it wait.

Install with npm:

npm:

npm install react-render-self --save

How to use

import * as React from "react";
import {ReactRenderSelf as RenderSelf} from "react-render-self";

class Main extends React.Component {
    render(): React.ReactNode {
        let counter = 1;
        return (
            <>
                <RenderSelf>
                    {'CHILDREN RENDERED'}
                </RenderSelf>
                <br />
                <RenderSelf empty>
                    {'CHILDREN WILL NOT RENDERED'}
                </RenderSelf>
                <br />
                <RenderSelf empty onRenderEmpty={'EMPTY RENDERED'}>
                    {'CHILDREN WILL NOT RENDERED'}
                </RenderSelf>
                <br />
                <RenderSelf onRenderContent={'CUSTOM CONTENT'}>
                    {'CHILDREN WILL NOT RENDERED'}
                </RenderSelf>
                <br />
                <RenderSelf onRenderContent={self => <>{'CUSTOM CONTENT + '}{self.props.children}</>}>
                    {'CHILDREN RENDERED'}
                </RenderSelf>
                <br />
                <RenderSelf onRenderContent={self => (
                    <div onClick={() => counter++ && self.setState({})}>
                        {`CLICK WILL UPDATE ONLY THIS COMPONENT (counter = ${counter})`}
                    </div>
                )} />
                <br />
                <RenderSelf delay={3000}>
                    {'CHILDREN RENDERED AFTER 3 sec'}
                </RenderSelf>
                <br />
                <RenderSelf delay={3000} onRenderDelay={() => 'PLEASE WAIT...'}>
                    {'CHILDREN RENDERED'}
                </RenderSelf>
                <br />
                <RenderSelf
                    delay={3000}
                    empty
                    onRenderDelay={() => 'FIRST. PLEASE WAIT...'}
                    onRenderEmpty={'SECOND. EMPTY RENDERED'}
                >
                    {'CHILDREN WILL NOT RENDERED'}
                </RenderSelf>
            </>
        );
    }
}

License

MIT. Copyright (c) 2021 Vitaliy Dyukar.