Security News
Cloudflare Adds Security.txt Setup Wizard
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
gif-tsx
A simple TypeScript-first React GIF player library. Ships with best practices like:
ESM module specification for tree-shaking
Strict type-checking
gif-tsx
offers total flexibility when it comes to writing a GIF player
component. Because controls are exposed via a reusable hook, the consumer is
given complete creative freedom when it comes to defining what the GIF player
should do and how it should look.
Install with your choice of package manager.
npm install gif-tsx --save
yarn add gif-tsx
The useGifController
hook is the core of this library, and returns a GIF
controller bound to a canvas element which plays a GIF.
Let's start by writing a basic GifPlayer
component. We will first need to
import our dependencies:
import React, { useRef } from "react";
import { useGifController } from "gif-tsx";
And then, we need to provide two things.
A URL to load our GIF from.
A ref to a canvas
element that will be rendered after we load our GIF.
To load a custom GIF (i.e. not one served remotely), you must add the GIF to
your public/
directory which is configured by your bundler (e.g. Webpack,
Snowpack, or Vite). If you are using Vite, it is as simple as moving your GIF to
the public/
directory at the project root.
Then, we handle the error
, loading
, and resolved
states accordingly, and
we're all good to go!
function GifPlayer() {
const canvasRef = useRef<HTMLCanvasElement>(null);
const controller = useGifController("/earth.gif", canvasRef);
// handle loading state
if (controller.state === "loading") {
// `controller` has type `GifControllerLoading`
return null;
}
// handle error state
if (controller.state === "error") {
// `controller` has type `GifControllerError`
console.error(controller.errorMessage);
return null;
}
// `controller` has type `GifControllerResolved`
const { canvasProps, play, pause } = controller;
return (
<div>
<canvas {...canvasProps} ref={canvasRef} />
<button alt="play" onClick={play} />
<button alt="pause" onClick={pause}>
</div>
);
}
useGifController
The useGifController
hook accepts 3 parameters:
url: string
-- The URL of the GIF to play. This can be a local or remote
URL. For example, it can be /earth.gif
if earth.gif
is served by the local
server, or https://foo.bar/earth.gif
if earth.gif
is served by foo.bar
.
canvasRef: React.RefObject<HTMLCanvasElement>
-- A ref bound to the canvas
element returned in the resolved state.
autoplay: boolean = false
(optional, defaults to false
) -- Whether to
begin playing the GIF as soon as the GIF resolves.
useGifController
has 3 possible states, exposed by the GifController.state
property.
loading
: The GIF is currently being fetched and processed.
error
: There was an error fetching or processing the GIF. The GIF controller
exposes an error message on GifController.errorMessage
.
resolved
: The GIF was fetched and processed successfully. The GIF player
controls are only exposed in this state.
The component calling useGifController
should handle the states separately.
Assuming you've handled the loading
and error
states accordingly, the
following controls are exposed by the GIF controller.
canvasProps: HTMLCanvasElementProps
-- Props to pass to the canvas
element. Includes the ideal width
and height
.
playing: boolean
-- Whether the GIF is currently playing.
play: () => void
-- Callback which begins playing the GIF.
pause: () => void
-- Callback which pauses the GIF.
restart: () => void
-- Callback which resets the GIF back to the first
frame. Does not affect playback state.
frameIndex: number
-- The current frame, 0-indexed.
renderFrame: (frameIndex: number) => void
-- Callback which accepts an
argument frameIndex: number
that renders the frame at frame index frameIndex
.
renderNextFrame: () => void
-- Callback which renders the next frame of the
GIF.
renderPreviousFrame: () => void
-- Callback which renders the previous frame
of the GIF.
width: number
-- Width of the loaded GIF.
height: number
-- Height of the loaded GIF.
MIT. See LICENSE
file in project root.
FAQs
A TypeScript-first React GIF player library.
The npm package gif-tsx receives a total of 8 weekly downloads. As such, gif-tsx popularity was classified as not popular.
We found that gif-tsx demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
Security News
The Socket Research team breaks down a malicious npm package targeting the legitimate DOMPurify library. It uses obfuscated code to hide that it is exfiltrating browser and crypto wallet data.
Security News
ENISA’s 2024 report highlights the EU’s top cybersecurity threats, including rising DDoS attacks, ransomware, supply chain vulnerabilities, and weaponized AI.