README
<vc-members>
This Web Component follows the open-wc recommendation and is meant to be used with the Vonage Client SDK In-App Messaging.
A goal is to simplify the code needed to create a chat room quickly. Please see the Creating a chat app tutorial to see an implementation using Vanilla JavaScript.
This Web Component can be used to replace a part of the Chat app UI.
Installation
npm i @vonage/vc-members
Usage
<script type="module">
import '@vonage/vc-members/vc-members.js';
</script>
<vc-members></vc-members>
The vc-members
Web Component can handle all its responsibilities in a Conversation.
First, get a reference to the element:
const vcMembers = document.querySelector("vc-members");
Then, pass the Conversation object to the Web Component:
vcMembers.conversation = conversation;
Note: To see where
conversation
came from, see step 10 in the tutorial.
Styling
The vc-members
component uses CSS part and CSS custom properties to apply custom styles.
Here is a diagram that labels the parts of the component as well as the default style:
To style the overall component, the part is "ul". For each member in the list, the part is "li".
By setting the custom properties, "--vc-members-nth-child-odd-color" and "--vc-members-nth-child-even-color" you can customize the colors of the odd and even numbered rows.
Example:
vc-members::part(ul) {
list-style: disc;
border: 2px red dotted;
}
vc-members::part(li) {
color: black;
font-size: 30px;
}
vc-members {
width: 300px;
color: white;
--vc-members-nth-child-odd-color : green;
--vc-members-nth-child-even-color : blue;
}
Linting with ESLint, Prettier, and Types
To scan the project for linting errors, run
npm run lint
You can lint with ESLint and Prettier individually as well
npm run lint:eslint
npm run lint:prettier
To automatically fix many linting errors, run
npm run format
You can format using ESLint and Prettier individually as well
npm run format:eslint
npm run format:prettier
Testing with Web Test Runner
To run the suite of Web Test Runner tests, run
npm run test
To run the tests in watch mode (for <abbr title="test driven development">TDD</abbr>, for example), run
npm run test:watch
Demoing with Storybook
To run a local instance of Storybook for your component, run
npm run storybook
To build a production version of Storybook, run
npm run storybook:build
Tooling configs
For most of the tools, the configuration is in the package.json
to reduce the amount of files in your project.
If you customize the configuration a lot, you can consider moving them to individual files.
web-dev-server
Local Demo with npm start
To run a local development server that serves the basic demo located in demo/index.html