1.0.43 • Published 3 years ago

@davudk/react-utils v1.0.43

Weekly downloads
-
License
MIT
Repository
github
Last release
3 years ago

This library contains some commonly needed React utilities.

Hooks

useArray

function TestComponent() {
  const { at, moveUp, moveDown, remove /* and more */ } = useArray<MyType>();

  return (
    ...
  )
}

useAsync

function TestComponent() {
  const { result, prevResult, loading, error, load } = useAsync<UserProfile>({
    load: async () => {
      const res = await fetch('/api/profile');
      return res.json();
    }
  }):

  useEffect(load, []);
  
  return (
    ...
  )
}

useEffectSkipInitial

function TestComponent(props: any) {
  const { name } = props;
  
  useEffectSkipInitial(() => {
    // this will not be executed on the initial value of `name`
    //   e.g. if name is initially "A" and then changed to "B",
    //     this block will only execute after it's changed to "B" and on subsequent changes/values.
  }, [name]);

  return (
    ...
  )
}

useForceRender

function TestComponent() {
  const forceRender = useForceRender();
  
  return (
    <div>
      <h1>{Math.random()}</h1>
      <button onClick={forceRender}>Rerender</button>
    </div>
  )
}

useIsMounted

function TestComponent() {
  const [someData, setSomeData] = useState<any>();
  const isMounted = useIsMounted();

  // Example 1 (run code BEFORE initial render)
  if (!isMounted()) {
    // before initial render
  }

  // Example 2 (run code IF still mounted)
  async function longRunningOperation() {
    const data = await ... // some async op

    if (isMounted()) { // check to see if it's still mounted to avoid updating an unmounted component
      setSomeData(data);
    }
  }

  return (
    <div>
      <h1>{Math.random()}</h1>
      <button onClick={forceRender}>Rerender</button>
    </div>
  )
}

useMap

function TestComponent() {
  const { get, set, size /* and more */ } = useMap();

  return (
    ...
  )
}

useStorage

function TestComponent() {
  const [username, setUsername] = useStorage('username', {
    type: 'localStorage', // or 'sessionStorage'
    defaultValue: ''
  });

  return (
    <input value={username} onChange={e => setUsername(e.target.value)} />
  )
}

useStorageArray

function TestComponent() {
  const { at, moveUp, moveDown, remove /* and more */ } = useStorageArray<string>('todoList', {
    type: 'localStorage', // or 'sessionStorage'
    defaultValue: ['Item 1', 'Item 2']
  });

  return (
    ...
  )
}

useMap

function TestComponent() {
  const { get, set, size /* and more */ } = useStorageMap<string, any>('someMapInLocalStorage', {
    type: 'localStorage', // or 'sessionStorage'
  });

  return (
    ...
  )
}

useTimeout

function TestComponent() {
  const [num, setNum] = useState<number>();
  const { running, start, restart, stop } = useTimeout({
    autoStart: true,
    delay: 2000,
    callback: () => setNum(Math.random()),
    repeat: true
  });

  return (
    <div>Random value: {num}</div>
  )
}

Components

AsyncRender

You can also set the mode prop to "any" or "all" (default) to determine how the fields are required.

function TestComponent() {
  const profileLoader = useAsync<UserProfile>(...):
  useEffect(profileLoader.load, []);

  return (
    <AsyncRender control={profileLoader}>

      <AsyncRender.State result>
        <div>
          Hi, {profileLoader.result.username}!
        </div>
      </AsyncRender.State>

      <AsyncRender.State prevResult loading>
        <div className="pointer-events-none opacity-50">
          Hi, {profileLoader.prevResult.username}!
        </div>
      </AsyncRender.State>

      <AsyncRender.State prevResult={false} loading>
        <div>
          Loading...
        </div>
      </AsyncRender.State>

      <AsyncRender.State error>
        <div>
          There was an error while loading your profile, see below:
          <pre>
            {JSON.stringify(profileLoader.error, null, 4)}
          </pre>
        </div>
      </AsyncRender.State>

    </AsyncRender>
  )
}

Also check out

See package use-between. It goes pretty well with the hooks in this package.

1.0.19

4 years ago

1.0.18

4 years ago

1.0.39

3 years ago

1.0.17

4 years ago

1.0.38

3 years ago

1.0.16

4 years ago

1.0.40

3 years ago

1.0.22

4 years ago

1.0.43

3 years ago

1.0.21

4 years ago

1.0.42

3 years ago

1.0.20

4 years ago

1.0.41

3 years ago

1.0.26

3 years ago

1.0.25

3 years ago

1.0.24

3 years ago

1.0.23

3 years ago

1.0.29

3 years ago

1.0.28

3 years ago

1.0.27

3 years ago

1.0.33

3 years ago

1.0.32

3 years ago

1.0.31

3 years ago

1.0.30

3 years ago

1.0.37

3 years ago

1.0.15

4 years ago

1.0.36

3 years ago

1.0.14

4 years ago

1.0.35

3 years ago

1.0.13

4 years ago

1.0.34

3 years ago

1.0.12

4 years ago

1.0.11

4 years ago

1.0.10

4 years ago

1.0.9

4 years ago

1.0.8

4 years ago

1.0.7

4 years ago

1.0.6

4 years ago

1.0.5

4 years ago

1.0.4

4 years ago

1.0.3

4 years ago

1.0.2

4 years ago

1.0.1

4 years ago

1.0.0

4 years ago