react-powerpack

react-powerpack useful components & hooks

Installation

Documentation

Documentation

Install react-powerpack with npm

  npm install react-powerpack

Usage/Examples

<Show,Each/>

import { Show, Each } from 'react-powerpack';



function App() {

  const [visible,setVisible] = useState(false)
  const [nums,setNums] = useState([0,1,2,3,4,5])

  return (
    <Show>
      <Show.When isTrue={visible}>
        <Each of={nums} render={(num, index) => 
          <div>
           render {num}
          </div>
         
        } />
      </Show.When>
      <Show.Else>
        visible is false
      </Show.Else>
    </Show>
  )
}

import { ClickOutsideComponent } from 'react-powerpack';



function App() {



  return (
    <div>
      <ClickOutsideComponent onClickOutside={() => console.log("CLICK OUTSIDE")}>
          <div onClick={() => console.log("CLICK INSIDE")} style={{ border: '2px solid black', width: 200, height: 50 }}>hello</div>
      </ClickOutsideComponent>
    </div>
  )
}

useApi

export function App() {
  let { request, data} = useApi('https://randomuser.me/api/', 'get')
  //let { request, data, error } = useApi('https://randomuser.me/api/', 'get')
  //let { request, data, error } = useApi('https://randomuser.me/api/', 'get', { useCredentials: true, authorization: { scheme: 'Bearer', token: 'YOUR_TOKEN' } })    
  return (
    <Show>
      <Show.When isTrue={data !== null}>
        {JSON.stringify(data, null, 2)}
      </Show.When>
      <Show.Else>
        <div>request error</div>
      </Show.Else>
    </Show>
      )
  }

useAsync

import {useAsync} from 'react-powerpack';

const UserComponent = () => {
 
  const fetchUserData = async () => {
   
    const response = await fetch('https://randomuser.me/api/');
    if (!response.ok) {
      throw new Error('Failed to fetch user data');
    }
    return response.json();
  };

 
  const { isLoading, error, result } = useAsync(fetchUserData, []);

  return (
    <div>
      {isLoading && <p>Loading user data...</p>}
      {error && <p>Error: {error.message}</p>}
      {userData && (
        <div>
          {result}
        </div>
      )}
    </div>
  );
};

useLastCallback

import {useLastCallback} from 'react-powerpack';
export function App() {

  const [count, setCount] = useState(0);
  
  const increment = () => {
          setCount(prevCount => prevCount + 1);
  }
  
  const lastIncrement = useLastCallback(increment);
  
  return (
          <div className='p-5 items-center border-2 rounded-xl flex'>
              <p >Count: {count}</p>
              <button variant='secondary' onClick={increment}>Increment</button>
              <button variant='secondary' onClick={lastIncrement}>Last Increment</button>
          </div>
                
    )
}


export default SearchBar;

useTimeout

import {useTimeout} from 'react-powerpack';

const MessageComponent = () => {
  const [showMessage, setShowMessage] = useState(false);

 
  const showMessageAfterDelay = () => {
    setShowMessage(true);
  };

  // Use useTimeout to show the message after 3 seconds
  useTimeout(showMessageAfterDelay, 3000);

  return (
    <div>
      {showMessage && <p>Message displayed after 3 seconds!</p>}
    </div>
  );
};

export default MessageComponent;

useDisclosure,useToggle

import {useToggle,useDisclosure} from 'react-powerpack';

const [isToggled, toggle] = useToggle(false);

const { isOpen, open, close, toggle } = useDisclosure();



  return (
    <div>

     useToggle ->
          <button onClick={toggle}>Toggle</button>
          {isToggled ? <div>Toggle is ON</div> : <div>Toggle is OFF</div>} 

      useDisclosure - >

          <div>
            <button onClick={open}>Open Modal</button>
            <button onClick={close}>Close Modal</button>
            <button onClick={toggle}>Toggle Modal</button>
            {isOpen && (
              <div style={{ border: '1px solid black', padding: '10px' }}>
                Modal content
              </div>
            )}
          </div>

    </div>
  );
};

export default MessageComponent;

List components

component | description ------------- | ------------- Show | Conditional Renderer Each | Dynamic List Renderer ClickOutsideComponent | Component for handling external clicks TextFit | AutoResizable custom text More... | Documentation

List hooks

hook | description ------------- | ------------- useApi | Custom Axios Hook useAsync | Handles asynchronous operations useLastCallback | Remembers the last callback function useTimeout | Executes a function after a delay useClickOutside | Hook for detecting clicks outside useDisclosure | Manage modal or panel visibility useToggle | Toggle boolean state useLocalStorage | Manage localStorage events More... | Documentation