https://github.com/marianapatcosta/links-keeper
LinksKeeper is a npm package to group, manage and display all your network links, e-mail and phone numbers in the same place.
https://github.com/marianapatcosta/links-keeper
npm-package react responsive-design scss scss-modules typescript vite
Last synced: 3 days ago
JSON representation
LinksKeeper is a npm package to group, manage and display all your network links, e-mail and phone numbers in the same place.
- Host: GitHub
- URL: https://github.com/marianapatcosta/links-keeper
- Owner: marianapatcosta
- Created: 2023-01-08T13:19:12.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2023-01-30T13:20:18.000Z (almost 3 years ago)
- Last Synced: 2025-02-15T01:19:13.148Z (9 months ago)
- Topics: npm-package, react, responsive-design, scss, scss-modules, typescript, vite
- Language: TypeScript
- Homepage: https://marianapatcosta.github.io/links-keeper
- Size: 1.25 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Links Keeper
Links Keeper is a package to group, manage and display all your network links, e-mail and phone numbers in the same place. It was developed with TypeScript, React, Vite and SCSS modules.
It is available in 2 modes: **Static mode** and **Dynamic mode**, which are configured based on providing or not _props_ to the LinksKeeper component.
A Static demo is deployed [here](https://marianapatcosta.github.io/links-keeper).
A Dynamic demo is deployed as an installable, offline-first PWA [here](https://linkskeeper.web.app/).
Download from [Google Play Store ](https://play.google.com/store/apps/details?id=app.web.linkskeeper).
## Installation
### **_npm_**
```shell
npm install @marianapatcosta/links-keeper
```
### **_yarn_**
```shell
yarn add @marianapatcosta/links-keeper
```
## Static Mode
In this mode, LinksKeeper can be used as an external component to pass the information to be displayed as props. The application can be deployed and the static information displayed in the app.
Provides the following functionalities:
- Custom app colors and data by passing them as props.
- Visualize user's avatar, name and links.
- Generate QRCode, sharing URL, download link card (1).
(1) Note: if the provided avatar is site url instead of an upload image, only the QR code will be available in the card.
### Get Started
You can customize the component, by defining your own _profile_ and _colors_ object passing them as props. For Static mode, `LinksKeeper` component can be used as described in the example below and in `App.tsx` file:
```jsx
const Component = () => {
return (
)
}
```
#### **Props**
| Prop name | Type | Description | Default |
| ----------------- | :------------- | -----------------------------------------------------------------------------------: | ------: |
| profile\* | Profile | Provides information to display. Includes _avatarUrl_, _username_ and _links_ array | - |
| colors\* | ColorsSettings | Provides de colors to be used in the app. Includes _primary_, _secondary_ and _font_ | - |
| additionalClass\* | string | css class name to apply to the base component. | - |
#### **Colors prop**
| Field name | Type | Description | Default |
| ----------- | :--------------- | ---------------------------------------------: | --------: |
| primary\* | string (hexcode) | Hexcode for the primary/main color of the app. | '#023e83' |
| secondary\* | string (hexcode) | Hexcode for the secondary color of the app. | '#2174d4' |
| font\* | string (hexcode) | Hexcode for the fontn color of the app. | '#ffffff' |
#### **Profile prop**
| Field name | Type | Description | Default |
| ----------- | :----- | -------------------------------------------------------------------------------------------------------------------------------------------------: | ------: |
| avatarUrl\* | string | URL for user's avatar | - |
| username\* | string | name of the user | - |
| links | Link[] | Array of links, e-mails, phone numbers to be displayed. Each link must have and _id_ (string), _label_ (string), _url_ (string), and _icon_ (Icon) | - |
\*optional
These objects must following structure:
```ts
interface LinksKeeperProps {
profile?: Profile
colors?: ColorSettings
additionalClass?: string
}
type Profile = {
links: Link[]
username?: string
avatarUrl?: string
}
type ColorSettings = {
primary?: string
secondary?: string
font?: string
}
type Link = {
id: string
label: string
url: string
icon: Icon // Font-awesome icons; the available icons are stated below
}
type Icon =
faApple|
faDiscord|
faDribbble|
faFigma|
faGithub|
faGoogleDrive|
faGooglePlay|
faInstagram|
faLinkedin|
faMastodon|
faPatreon|
faReddit|
faShopify|
faSpotify|
faStackOverflow|
faTelegram|
faTiktok|
faTwitch|
faTwitter|
faWhatsapp|
faYoutube|
faBlog|
faBriefcase|
faCartShopping|
faEnvelope|
faGraduationCap|
faHouse|
faMobileScreen|
faUser
```
## Dynamic Mode
In this mode, LinksKeeper can be used as an external component without passing any props. It relies on browser's LocalStorage API to manage (display, add, edit and delete) user's links, e-mails and phone. The application can be deployed and the dynamic information displayed in the app. This is useful for a personal contact list with users's own contacts and contacts from other people. Can be particularly useful if integrated in an offline-first application.
Provides the following functionalities:
- Add, edit, filter, delete links, e-mails or phone numbers.
- Generate QRCode, sharing URL, download link card.
- Custom the app colors.
### Get Started
For dynamic mode, `LinksKeeper` component can be used as described in the example below and in `App.tsx` file:
```jsx
const Component = () => {
return
}
```
## Available Scripts
### `yarn install`
Installs all the dependencies required to run and develop this application.
### `yarn dev`
Open [http://localhost:5173](http://localhost:5173) with your browser to see the result.
### `yarn build`
Build a production-ready application.
Note: for building demo page, remove **build** field in `vite.config.ts` file.
### `yarn preview`
Runs the production build locally
### `yarn deploy`
Deploys Demo page to github pages