dialogs / Dialog Web Components
Licence: apache-2.0
Set of react components for building messaging applications
Stars: ✭ 414
Programming Languages
javascript
184084 projects - #8 most used programming language
Labels
Projects that are alternatives of or similar to Dialog Web Components
Vue Goodshare
🍿 Vue.js component for social share. A simple way to share a link on the pages of your website in the most popular (and not so) social networks. Powered by goodshare.js project.
Stars: ✭ 345 (-16.67%)
Mutual labels: components
Alva
Create living prototypes with code components.
Stars: ✭ 3,734 (+801.93%)
Mutual labels: components
Shards Vue
🌟Shards Vue is a free, beautiful and modern Vue.js UI kit based on Shards.
Stars: ✭ 390 (-5.8%)
Mutual labels: components
Flynt
Component based WordPress starter theme, powered by ACF Pro and Timber, optimized for a11y and fast page load results.
Stars: ✭ 363 (-12.32%)
Mutual labels: components
Windmill React Ui
🧩 The component library for fast and accessible development of gorgeous interfaces.
Stars: ✭ 373 (-9.9%)
Mutual labels: components
Mosaic
🎨 A front-end JavaScript library for building user interfaces!
Stars: ✭ 390 (-5.8%)
Mutual labels: components
Malvid
UI to help you build and document web components.
Stars: ✭ 347 (-16.18%)
Mutual labels: components
Decompose
Kotlin Multiplatform lifecycle-aware business logic components (aka BLoCs) with routing functionality and pluggable UI (Jetpack Compose, SwiftUI, JS React, etc.)
Stars: ✭ 339 (-18.12%)
Mutual labels: components
React Uploady
Modern file uploading - components & hooks for React
Stars: ✭ 372 (-10.14%)
Mutual labels: components
Tachyons Components
React UI components powered by Tachyons with a styled-components like API
Stars: ✭ 409 (-1.21%)
Mutual labels: components
React Tunnels
🚇 Render React components in placeholders that are placed somewhere else in the component tree.
Stars: ✭ 398 (-3.86%)
Mutual labels: components
Mam mol
$mol - fastest reactive micro-modular compact flexible lazy ui web framework.
Stars: ✭ 385 (-7%)
Mutual labels: components
dialog web components
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(
<Avatar
title="Hipster Partycat"
image="https://octodex.github.com/images/hipster-partycat.jpg"
/>,
container
);
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(
<Provider messages={messages} locale={navigator.language}>
<App />
</Provider>,
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
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].