npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@mxenabled/connect-widget

v0.0.7

Published

A simple ui library for React

Downloads

539

Readme

Connect Widget

NPM Version

This is the UI only for the connect widget. Heavy configuration and an API are needed for this project to work. See usage and props for more details.

Installation

Install using npm package manager:

npm install @mxenabled/connect-widget

Usage

  1. Install package: npm install --save @mxenabled/connect-widget
  2. Import ApiProvider and ConnectWidget. Add both to your project.
  3. Pass applicable props to widget and your API to the provider.
import ConnectWidget, { ApiProvider } from '@mxenabled/connect-widget'
import apiService from './apiService' // You custom api service

const App = () => {
  return (
    <ApiProvider apiValue={apiService}>
      <ConnectWidget {...props} />
      {/* See props details below */}
    </ApiProvider>
  )
}

Props

| Prop | Type | Description | Default | | :------------------- | :------------------------------------------------------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------- | :-------------------------------------------- | | clientConfig | ClientConfigType | The connect widget uses the config to set the initial state and behavior of the widget. More details | See more details | | language | LanguageType | The connect widget supports multiple languages and custom copy. Supported locale options: en, es, and fr-ca. | { locale: 'en', custom_copy_namespace: '' } | | onAnalyticEvent | AnalyticContextType | The connect widget provides a way to track events and pageviews using your own analytics provider. More details | null | | onAnalyticPageview | AnalyticContextType | The connect widget provides a way to track events and pageviews using your own analytics provider. More details | null | | onPostMessage | PostMessageContextType | The connect widget uses post messages to communicate with the parent window. More details | null | | profiles | ProfilesTypes | The connect widget uses the profiles to set the initial state of the widget. More details | See more details | | userFeatures | UserFeaturesType | The connect widget uses user features to determine the behavior of the widget. More details | See more details | | showTooSmallDialog | boolean | The connect widget can show a warning when the widget size is below the supported 320px. | true |

ApiProvider

You need to pass an object containing API endpoint callbacks as the apiValue prop of the ApiProvider as described in the usage section for the widget to work. Here is a more detailed list of the API endpoint callbacks.

Developing

  1. Clone project
  2. Install Node(with npm). See package.json for current required versions
  3. Run npm i
  4. Make your code changes
  5. Run npm run build to build the project
  6. Link Project
  7. Test your changes
  8. Update change log, translations, and documentation as needed
  9. Open Pull Request

Linking for Development

For developing this package locally, we suggest you use npm link to connect your local version of the package to your client app using the package.

  1. In the npm package root, run npm link.
  2. Then in your consumer project, run npm link @mxenabled/connect-widget.

This will link the local package to your project in the node modules. Unlink the package when you are finished or if you run into issues.

Contributing

Pull requests are welcome. Please open an issue first to discuss what you would like to change.

Make sure to add/update tests, translations, and documentation as appropriate.

Changelog

View our changelog here