# cmp-exp-browser

> Experiments Card and People Card

Latest version **1.1.0** (published 2023-12-20) · ISC license · 0 weekly downloads

## Install

```sh
npm install cmp-exp-browser
pnpm add cmp-exp-browser
yarn add cmp-exp-browser
bun add cmp-exp-browser
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.0 |
| Published | 2023-12-20 |
| First published | 2023-07-21 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 4 |
| Unpacked size | 1.3 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | VLEAD |
| Maintainers | virtual-labs |

## Links

- npm: https://www.npmjs.com/package/cmp-exp-browser
- npm.io page: https://npm.io/package/cmp-exp-browser

## Dependencies (4)

- [bulma](https://npm.io/package/bulma.md) ^0.9.4
- [react](https://npm.io/package/react.md) ^18.2.0
- [react-copy-to-clipboard](https://npm.io/package/react-copy-to-clipboard.md) ^5.1.0
- [@fortawesome/fontawesome-free](https://npm.io/package/@fortawesome/fontawesome-free.md) ^6.4.0

## Recent versions

- 1.1.0 (latest) — 2023-12-20
- 1.0.5 — 2023-07-30
- 1.0.4 — 2023-07-25
- 1.0.3 — 2023-07-25
- 1.0.2 — 2023-07-21
- 1.0.1 — 2023-07-21

## README

# cmp-exp-browser
## How to use
### FOr experiment-card
### 1. npm install cmp-exp-browser
### 2. import ExpComponent from 'cmp-exp-browser' in your js file
### 3. parameters to be given as JSON. like 
### {
###         exp_name: 'Experiment Name',
###         collage: 'Collage',
###         exp_link: 'Link to the experiment',
###         exp_img: '',
###         collage_img: '',
###         card_content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.Phasellus nec iaculis mauris.',
###         rating: '4.5',
###         domain:'Domain',
###         saved: true/false,
### }
### 4. This json parameter should be passed with the name 'UserData'
### 5. Another parameter is a callback function named 'onValueChange', which takes single parameter. The value of this parameter will be true or false according to saved or not saved.
### 6. For example -: define a usestate variable
### const [saved,setsaved] = useState(false)
### Then define a function
### function on_savedvalue_change(value){setsaved(value);}. 
### Then use the component like 
### <ExpComponent UserData={UserData} onValueChange={on_savedvalue_change}/>.
### now 'saved' hook will be true if exp is saved else it will be false.
### 7. Another parameter is a also callback function named 'onclickinglink', which takes single parameter. This parameter is the link of experiment. What action is to be performed can be on clicking exp_name can be defined in this function. 
### 8. For example -: define a function
### function open_link(value)
### {
###   window.open(value)
### }
### Then use the component like 
### <ExpComponent UserData={UserData}  onValueChange={on_savedvalue_change} onclickinglink = {open_link}/>.
### now on clicking the exp_name the function 'open_link' will be called


### For people card
### 1. npm install cmp-exp-browser
### 2. import PeopleCard from 'cmp-exp-browser' in your js file
### 3. parameters to be given as JSON. like 
### {
###     present: true,
###    display_name: "First Last",
###    full_name: "first Middlename last",
###    curr_position: "Employee",
###    last_working_year: "present",
###    about_me:
###      "Lorem ipsum sit amet.",
###    institute: "IIIT-H",
###    profile_img: "https://picsum.photos/96/96",
###    impact_score: "4.5",
###    linkedin: "https://www.linkedin.com/",
###    email: "example@gamil.com",
###    associations: [
###      {
###        name: "DASS",
###        joining: "Jan-23",
###        leaving: "Apr-23",
###        projects: [
###          {
###            link: "https://github.com/",
###            title: "title",
###            contribution:
###              "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris.",
###          },
###          {
###            link: "https://github.com/",
###            title: "title1",
###            contribution:
###              "Lorem ipsum dolor sit amet, consectetur adipiscing elit.Phasellus nec iaculis mauris.",
###          },
###        ],
###      },
###      {
###        name: "Summer Intern",
###        joining: "May-23",
###        leaving: "present",
###        projects: [
###          {
###            link: "null11",
###            title: "title11",
###            contribution:
###              "Lorem ipsum dolor sit amet, consectetur adipiscing elit.Phasellus nec iaculis mauris.",
###          },
###          {
###            link: "null12",
###            title: "title12",
###            contribution:
###              "Lorem ipsum dolor sit amet, consectetur adipiscing elit.Phasellus nec iaculis mauris.",
###          },
###        ],
###      },
###    ],
### }

### <PeopleCard UserData={UserData}  />.

## How to publish new version
### 1. Change version in package.json
### 2. npm run build
### 3. npm login (only once)
### 4. npm publish

---
_Source: https://npm.io/package/cmp-exp-browser · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._