Pkg
Stats

npm package discovery and stats viewer.

Discover Tips

General search
[free text search, go nuts!]
Package details
pkg:[package-name]
User packages
@[username]

Sponsor

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.

Twitter
@PkgStats
GitHub
pkgstats
Twitter
@ryanhefner
GitHub
ryanhefner
Site
ryanhefner.com

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 🙏

Framework
react / react-dom
Server
next / express / next-routes
Data Store
redux / react-redux / next-redux-wrapper / redux-thunk / redux-logger
Caching
lru-cache
CSS / Styling
next-page-transitions / styled-components
Typeface
@ibm/plex
Avatars
gravatar
Data Viz
chart.js / react-sparklines
Date formatting
dayjs
Infinite scrolling
react-scroll-trigger
Markdown rendering
react-markdown
Repository url parsing
hosted-git-info
User data
npm-user
Compiling
babel-plugin-module-resolver / babel-plugin-styled-components
Types
prop-types
Odds & Ends
es6-promise / isomorphic-fetch

© 2024 – Pkg Stats / Ryan Hefner

@procore/labs-comments

v1.2.2

Published

5 days ago

A component to render comments, with avatar

Downloads

211

0High
0Medium
0Low

jeremy.bouzigard

ajaykumar-procore

andersonbispoprocore

dev-account-admin

lalovar-procore

ihor.diachenko_procore

chance.eakin.procore

stevenliprocore

david-christensen-procore

mike-arndt-procore

juliana.hernandez

procore-it-support

rachel.arkebauer

procore-npm-bot

james.dabbs-procore

laurenbrandsteinprocore

scottbieser-procore

zach.mckenzie.procore

shayonj_procore

derek-carter-procore

stephan-procore

aleclarsenprocore

apcarroll_procore

mehrdad-panahandeh

allenanle.procore

devin.cunningham.procore

hgouhierprocore

dmccraw-procore

abhijit.patwardhan

matt.harris0223

dtorres-procore

dineshkumar.jayak

sateesh-kadiyala-procore

jamie-dugan-procore

viktoriia_azarovska

daniel.ferreira-contractor

karina.mendez-contractor

kuldeepsingh4556

brocktillotsonprocore

ryanfuentesprocore

tyler.wasden.procore

cody_schindler_procore

amit.gurav-contractor

scorgiat-procore

alyelashram_procore

ilya.dryha-contractor

evan.cerwonka.procore

aleh.haurylenia-contractor

miguel.garcia-procore

codyrobertsprocore

mustafa-abdelrahman

victorbendeck-pc

procore-oss-user

abhishekkumar123

stephanie.brereton

saurasumprocore

elewando-procore

jgreene_procore

ganesh.raghupathy

rajatmenhdiratta

dlameter-procore

connie-feng-procore

fernandocamilotti

jacksonleach-procore

tatsiana.clifton

srichaitanya.peddinti

abhijit-procore

mustafa-u-abdelrahman

pwhisenhunt-procore

mariia.solodovnik

bohdan-horai-procore

mathenes_procore

vinoth.kuppusamy

alan.facchini-contractor

cassianomatos-procore

daniel-pierre-procore

ashish.sharma2024

gaurav.sharma.procore

andres-mendez-procore

kylemartinez-procore

sean.spearman.procore

rodrigo.dejuana

andreszorrilla-procore

subham.panigrahi

Comments

The description.

Installation

yarn add @procore/labs-comments

Usage

import * as Comments from '@procore/labs-comments';

const MyComments = () => {
    const today = new Date();
    const comments = [
        {
            author: 'Evan Freymiller',
            title: 'Software Engineer',
            date: today.toString(),
            body: "This is good news, let's try to get the deal in by Friday.",
        },
        {
            author: 'Evan Freymiller',
            title: 'Software Engineer',
            date: today.toString(),
            body: "Sound good, I'll reach out today.",
        },
        {
            author: 'Evan Freymiller',
            title: 'Software Engineer',
            date: today.toString(),
            body: 'Please let me know by the close of business.',
        },
    ];
    return comments.map((comment, index) => (
        <Comment.Container border={index !== 0}>
            <Comment.Header>
                <Comment.Avatar>{comment.author}</Comment.Avatar>
                <Comment.Author date={comment.date}>
                    <Comment.AuthorName>{comment.author}</Comment.AuthorName>
                    <Comment.AuthorJobTitle>{comment.title}</Comment.AuthorJobTitle>
                </Comment.Author>
            </Comment.Header>
            <Comment.Body>{comment.body}</Comment.Body>
        </Comment.Container>
    ));
}

Components

<Container \/>

| props | type | | :------- | :-------- | | children | reactNode | | border | boolean |

<Body \/>

| props | type | | :------- | :-------- | | children | reactNode |

<Header \/>

| props | type | | :------- | :-------- | | children | reactNode |

<Author \/>

| props | type | | :------- | :------------- | | date | Date or string | | children | reactNode |

<AuthorName \/>

| props | type | | :------- | :-------- | | children | reactNode |

<AuthorJobTitle \/>

| props | type | | :------- | :-------- | | children | reactNode |

<AuthorDate \/>

| props | type | | :------- | :-------- | | children | reactNode |

<Avatar \/>

| props | type | | :------- | :----- | | children | string | | url | string |

<Actions \/>

| props | type | | :------- | :---------------- | | children | array of Action[] | | disabled | boolean | | onSelect | function |

<Action \/>

| props | type | | :------ | :------- | | onClick | function | | key | string |

<Attachment \/>

| props | type | | :------- | :----- | | fileUrl | string | | fileName | string |

Dependencies

@procore/core-react and react are listed as external peer dependencies. The package will not bundle the code, and requires the app client to provide it as a dependency. The external peer dep is to assure React Context is consistent in a client's React tree, the child consumers can reference the correct parent provider. If the package uses latest features or bug fixes and a new minimum version of core-react is required, it should be considered a breaking change as the peer dependency version must be met.