Null Pointer Micromanagement

    react-hook-component-state
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.1 • Public • Published

    React Hook Component State

    This hook allows you to isolate and manage the state within the component, reducing rendering operations and keeping the source code concise.

    Motivation

    As the component complexity increases more state values are needed and a rendering operation is required whenever the state values change. Instead of adding a part of the source code as a separate component file to improve performance, you can use this hook to internally isolate the component state.

    Installation

    The easiest way to install react-hook-component-state is with npm.

    npm install react-hook-component-state

    Alternately, download the source.

    git clone https://github.com/stegano/react-hook-component-state.git

    Examples

    To use the Backdrop or Dialog component, you need to create and use an open state value. You can quickly and easily create a component with a state by using the use-component-state hook without creating an open state value inside the current component.

    with MUI Backdrop Component

    const SomeComponent = () => {
      ...
      const [$backdrop, setBackdropOpen] = useComponentState<boolean>(
        (isOpen, setOpen) => {
          /**
           * MUI Backdrop Component
           * @see https://mui.com/components/backdrop/#main-content
           */
          return (
            <Backdrop open={open} onClose={() => setOpen(false)}>
              <CircularProgress color="inherit" />
            </Backdrop>
          )
        }, 
        true
      );
      return (
        ...
        {$backdrop}
      )
    }

    with MUI Dialog Component

    const SomeComponent = () => {
      ...
      const [$dialog, setBackdropOpen] = useComponentState<{
        isOpen: boolean, content: string
      }>(
        ({ isOpen, content }, setState) => {
          /**
           * MUI Dialog Component
           * @see https://mui.com/components/dialogs/#main-content
           */
          const handleClose = () => {
            setState((state) => {
              return {
                ...state,
                isOpen: false
              }
            })
          }
          return (
            <Dialog open={open} onClose={handleClose}>
              <DialogTitle>Dialog Title</DialogTitle>
              <DialogContent>{content}</DialogContent>
            </Dialog>
          )
        }, 
        {
          isOpen: false,
          content: 'Dialog Content'
        }
      );
      ...
      return (
        ...
        {$dialog}
      )
    }

    Install

    npm i react-hook-component-state

    DownloadsWeekly Downloads

    9

    Version

    1.0.1

    License

    ISC

    Unpacked Size

    7.77 kB

    Total Files

    9

    Last publish

    Collaborators

    • stegano