@avaya/neo-react NPM

Neo React Component Library

This is the react version of the shared library called "NEO" buit by Avaya (storybook site)

Install

npm i @avaya/neo-react

yarn add @avaya/neo-react

pnpm add @avaya/neo-react

Example Usage

At the root of your application, import the CSS styles via:

import "@avaya/neo-react/avaya-neo-react.css";

Then, simply import the component(s) that you'd like to use, see the documentation site for more examples.

import { IconNamesType, NoContent } from "@avaya/neo-react";

export const Example = () => {
  const agentIconName: IconNamesType = "agent";
  return <NoContent icon={agentIconName} text={"Agent has no content"} />;
};

NOTE: if you are using Astro, add the following to your astro.config.mjs (link to Astro docs on "why" to do this):

export default defineConfig({
  vite: {
    ssr: {
      noExternal: ["avaya-neo-react"],
    },
  },
});

NOTE: The Neo CSS Library is included with the Neo React Library. If you install the Neo React Library, you do not need to install or import from the CSS Library.

Project Recommendations

Vite w/ TS

This team has experience building projects (both apps and libraries) using CRA (create-react-app), Vite, Webpack, Parcel, and Rollup. Of those, we recommend using Vite to build out brand new projects. Vite has shown itself to be not only a faster build tool, but also to be a better DX (Developer eXperience) due to its excellent documentation and intelligent defaults. See this article for some further details on those points.

Example app creation with Vite using React+TS: pnpm create vite my-react-ts-app --template react-ts

This team also has experience building projects with the package managers NPM, Yarn (classic), and PNPM. Of the three, we have had good experiences with both Yarn (classic) and PNPM and recommend either of those.