Fajarma React Library

Personal React package for fajarma.

Installation

npm install fajarma-react-lib

Components

Dialog

import { Dialog } from "fajarma-react-lib";

const [display, setDisplay] = useState(false);
...

<Dialog display={display} onClose={() => setDisplay(false)}>
  Content
</Dialog>

Fajarma's Components

ProjectCard

import { ProjectCard } from "fajarma-react-lib";

const [visible, setVisible] = useState(false);
const { ref } = useIntersect<HTMLDivElement>(setVisible);
...

<div ref={ref}>
  <ProjectCard
    desktopOnly
    isMobile
    className="cardModifier"
    desc={'Some project description'}
    icon={{
      expand: <FaChevronDown />,
      link: <FaLink />,
      noLink: <FaLinkSlash />,
      repo: <FaGithub title="Github repository" />,
      collapse: <FaChevronUp />,
      stacks: <FaCube title="Stacks" />,
    }}
    previewComp={<PreviewComponent />}
    repo=['https://github.com']
    stacks=['{"name": "React", "url": "https://react.dev/"}']
    thumbnail="image.png"
    title="Card Title"
    url="https://fajarma.com"
    visible={visible}
  />
</div>

Custom Hooks

useDebounce

const debounced = useDebounce(callback, options);

• Parameters

  • callback: Function to be debounced

    | Type | Required | Example | | ------------------- | :------: | -------- | | (params: T) => void | true | () => {} |

  • options

    | Type | Required | Example | | ----------------- | :------: | -------------- | | UseDebonceOptions | | see more below |

    • UseDebonceOptions

      • disabledValue: Disable debounce when meet this value (execute immediately).

      | Type | Default | Example | | :--: | --------- | ------- | | T | undefined | |

      • timeout: Debounce time limit.

      | Type | Default | Example | | :----: | ------- | ------- | | number | 500 | 1000 |

import { useDebounce } from "fajarma-react-lib";
...

const handleDebounceHit = useDebounce(() => {
    console.log('debounced');
  },
  {
    disabledValue: '',
    timeout: 500,
  }
);

useIntersect

const { ref, intersecting } = useIntersect(callback, options);

• Parameters

  • callback: Function to be called when element intersected

    | Type | Required | Example | | ---------- | :------: | -------- | | () => void | true | () => {} |

  • options: IntersectionObserver options. See Intersection Observer API for details.

• Returns

  • ref: React.RefObject

import { useIntersect } from "fajarma-react-lib";
...

const handleIntersect = () => {
  console.log('intersecting');
}

const { ref, intersecting } = useIntersect(handleIntersect);
...

<div ref={ref} />

useResizeObserver

const { ref, elementSize } = useResizeObserver(callback);

• Parameters

  • callback: Function to be called when element resized

    | Type | Required | Example | | ---------- | :------: | -------- | | () => void | | () => {} |

• Returns

  • ref: React.RefObject
  • elementSize: Object of element size.
    • width: number.
    • heigth: number.

import { useResizeObserver } from "fajarma-react-lib";
...

const { ref, elementSize } = useResizeObserver<HTMLDivElement>();
...

<div ref={ref}>
  {elementSize.width} x {elementSize.height}
</div>

useThrottle

const throttled = useThrottle(callback, options);

• Parameters

  • callback: Function to be throttled

    | Type | Required | Example | | ------------------- | :------: | -------- | | (params: T) => void | true | () => {} |

  • options

    | Type | Required | Example | | ------------------ | :------: | -------------- | | UseThrottleOptions | | see more below |

    • UseThrottleOptions

      • disabledValue: Disable throttle when meet this value (execute immediately).

      | Type | Default | Example | | :--: | --------- | ------- | | T | undefined | |

      • timeout: Time interval.

      | Type | Default | Example | | :----: | ------- | ------- | | number | 500 | 1000 |

import { useThrottle } from "fajarma-react-lib";
...

const handleThrottleHit = useThrottle(() => {
    console.log('throttled');
  },
  {
    disabledValue: '',
    timeout: 500,
  }
);