Need help with dialog-web-components?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

dialogs
411 Stars 49 Forks Apache License 2.0 3.4K Commits 10 Opened issues

Description

Set of react components for building messaging applications

Services available

!
?

Need anything else?

Contributors list

dialog web components

CircleCI

Quality Gate Status Maintainability Rating Security Rating

Vulnerabilities Bugs Code Smells

Total alerts Language grade: JavaScript

dependencies devDependencies

GitHub tag npm version

license

Docs & Demo

Installation

yarn add @dlghq/dialog-components

or

npm install --save @dlghq/dialog-components

Usage example

import React from 'react';
import { render } from 'react-dom';
import { Avatar } from '@dlghq/dialog-components';

const container = document.getElementById('container');

render( , container );

More components.

Webpack configuration

We're not compiling JS & CSS code before publishing. You have to update or add webpack configuration to your build pipeline.

yarn add babel-loader postcss-loader css-loader style-loader svg-sprite-loader
yarn add @dlghq/babel-preset-dialog @dlghq/postcss-dialog
// webpack.config.js

const fs = require('fs'); const path = require('path');

function resolve(...paths) { return fs.realpathSync(path.join(__dirname, ...paths)); }

const whitelist = [ resolve('src'), // your application code resolve('node_modules/@dlghq/dialog-components/src'), resolve('node_modules/@dlghq/markdown'), resolve('node_modules/@dlghq/react-l10n'), resolve('node_modules/@dlghq/dialog-types'), resolve('node_modules/@dlghq/dialog-utils'), resolve('node_modules/@dlghq/country-codes') ];

module.exports = { module: { rules: [ { test: /.js$/, include: whitelist, loader: 'babel-loader', options: { babelrc: false, cacheDirectory: true, presets: [ [ '@dlghq/dialog', { modules: false, runtime: false } ] ] } }, { test: /.css$/, use: [ 'style-loader', { loader: 'css-loader', options: { modules: false, importLoaders: 1 } }, { loader: 'postcss-loader', options: { plugins() { return require('@dlghq/postcss-dialog')(); } } } ], include: [ resolve('node_modules/@dlghq/dialog-components/src/styles/global.css') ] }, { test: /.css$/, include: whitelist, exclude: [ resolve('node_modules/@dlghq/dialog-components/src/styles/global.css') ], use: [ 'style-loader', { loader: 'css-loader', options: { modules: true, importLoaders: 1, localIdentName: '[name]__[local]' } }, { loader: 'postcss-loader', options: { plugins() { return require('@dlghq/postcss-dialog')(); } } } ] }, { test: /.(jpg|png|svg|gif)$/, exclude: resolve('node_modules/@dlghq/dialog-components/src/components/Icon/svg'), loader: 'file-loader' }, { test: /.svg$/, include: resolve('node_modules/@dlghq/dialog-components/src/components/Icon/svg'), loader: 'svg-sprite-loader' } ] } };

Translations

For some complex components, like

AuthForm
you should wrap your components tree by
@dlghq/react-l10n
Provider
component. Before publishing we generate
messages.json
bundle, which you should pass to
Provider
.
import React from 'react';
import { render } from 'react-dom';
import { Provider } from '@dlghq/react-l10n';
import dialogMessages from '@dlghq/dialog-components/src/messages.json';
import appMessages from './messages';

const container = document.getElementById('container');

const messages = { ...dialogMessages, ...appMessages };

render( , container );

Development

NPM scripts:

  • npm start
    start dev server
  • npm run create
    create new component
  • npm test
    run tests
  • npm run lint
    run linters
  • npm run format
    run formatters
  • npm run build
    build library
  • npm run docs
    build docs
  • npm run release
    build & publish to npm & publish to gh-pages

License

Apache-2.0

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.