![Deno 2.2 Improves Dependency Management and Expands Node.js Compatibility](https://cdn.sanity.io/images/cgdhsj6q/production/97774ea8c88cc8f4bed2766c31994ebc38116948-1664x1366.png?w=400&fit=max&auto=format)
Security News
Deno 2.2 Improves Dependency Management and Expands Node.js Compatibility
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
react-live-chat-loader
Advanced tools
Implement live chat in your react app without taking a performance hit.
An npm module that allows you to mitigate the negative performance and user experience impact of chat tools. React-live-chat-loader shows a fake widget until the page has finished loading or users are ready to interact with chat.
Currently works with Intercom and Help Scout.
Chat widgets rely heavily on JavaScript which comes at a cost. Given the significant impact comes from the download, parse, compile and execution of the chat JavaScript, React Live Chat Loader implements a "fake", fast loading button and then wait for one of the following events before loading the actual widget:
Under the hood React Live Chat Loader makes use of requestIdleCallback
, but
there is no timeout option because if the main thread is not quiet for a
significant amount of time the should not be blocked with a third party script.
In addition to waiting for the page to become idle, React Live Chat Loader
checks if the user isn't on a slow connection (using
navigator.connection.effectiveType
) or has data-saver enabled (using
navigator.connection.saveData
) to prevent loading the widget when the page
has been idle.
To download react-live-chat-loader run:
npm install --save react-live-chat-loader
Or if you're using yarn, run:
yarn add react-live-chat-loader
To allow you to trigger a single live chat within your application, React Live Chat Loader has a Context Provider which should be added at the root level of your application.
You pass your providerKey
and provider
to the LiveChatLoaderProvider
.
For example, to add a LiveChatLoaderProvider
for Help Scout you would do the
following:
import { LiveChatLoaderProvider } from 'react-live-chat-loader'
export default class App extends React.Component {
/* ... */
render() {
return (
<LiveChatLoaderProvider providerKey="asdjkasl123123" provider="helpScout">
/* ... */
</LiveChatLoaderProvider>
)
}
}
You can then include the relevant chat where you would like it to appear.
For example, for Help Scout you would import the HelpScout
component and add it
to your application:
import { HelpScout } from 'react-live-chat-loader'
export default class Index extends React.Component {
/* ... */
render() {
return (
<>
/* ... */
<HelpScout />
</>
)
}
}
And to load the chat from a custom button you can import the useChat
hook which has the current state of the chat and a function to load the
chat.
import { useChat } from 'react-live-chat-loader'
export const LoadChatButton = () => {
const [state, loadChat] = useChat()
return <button onClick={loadChat}>Load Chat</button>
}
You can pass the following props to the LiveChatLoaderProvider
provider:
provider
: Choose from helpScout
or intercom
(see below)providerKey
: Provider API Key (see below)idlePeriod
: How long to wait in ms before loading the provider. Default is
2000
. Set to 0
to never load.Currently there are two supported providers:
To use Help Scout import the LiveChatLoaderProvider
and set the provider
prop
as helpScout
and the providerKey
prop as your Beacon API Key.
Then import the HelpScout
component.
import { LiveChatLoaderProvider, HelpScout } from 'react-live-chat-loader'
export default class App extends React.Component {
render() {
return (
<LiveChatLoaderProvider providerKey="asdjkasl123123" provider="helpScout">
/* ... */
<HelpScout />
</LiveChatLoaderProvider>
)
}
}
You can customise the Help Scout beacon by passing the following props to the
HelpScout
component:
color
: The background color of the beaconicon
: Choose from message
, antenna
, search
, question
, beacon
zIndex
: Changes the CSS index value of how the Beacon relates to other objectshorizontalPosition
: Choose from left
or right
Currently the Help Scout component only supports the icon button style.
To use Intercom import the Intercom
component and set the provider
prop as
intercom
and the providerKey
prop as your Intercom App ID.
To use Intercom import the LiveChatLoaderProvider
and set the provider
prop
as intercom
and the providerKey
prop as your Intercom App ID.
Then import the Intercom
component.
import { LiveChatLoaderProvider, HelpScout } from 'react-live-chat-loader'
export default class App extends React.Component {
render() {
return (
<LiveChatLoaderProvider providerKey="asd239" provider="intercom">
/* ... */
<Intercom />
</LiveChatLoaderProvider>
)
}
}
You can customise the color of the Intercom widget by passing a color
prop to
the Intercom
component.
FAQs
Implement live chat in your react app without taking a performance hit.
The npm package react-live-chat-loader receives a total of 9,293 weekly downloads. As such, react-live-chat-loader popularity was classified as popular.
We found that react-live-chat-loader demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers 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
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
Security News
React's CRA deprecation announcement sparked community criticism over framework recommendations, leading to quick updates acknowledging build tools like Vite as valid alternatives.
Security News
Ransomware payment rates hit an all-time low in 2024 as law enforcement crackdowns, stronger defenses, and shifting policies make attacks riskier and less profitable.