open-index/open-npm huggingface dataset:
npm package: @lokesharora/ngx-countdown-timer
Description: ## Installation
Author: Lokesh
Latest version: 0.1.0

# ngx-countdown-timer

## Installation

To install this library, run:

```bash
$ npm install ngx-countdown-timer --save
```

## Consuming your library

Once you have published your library to npm, you can import your library in any Angular application by running:

```bash
$ npm install ngx-countdown-timer
```

and then from your Angular `AppModule`:

```typescript
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

// Import your library
import { CountdownTimerModule } from 'ngx-countdown-timer';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,

    // Specify your library as an import
    LibraryModule
    CountdownTimerModule.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
```

Once your library is imported, you can use its components, directives and pipes in your Angular application:

```xml
<!-- You can now use your library component in app.component.html -->
<h1>
  {{title}}
</h1>
Timer mode:
<countdown-timer [start]="'2017-01-01 00:00:00'"></countdown-timer>
 
Countdown:
<countdown-timer [end]="'2018-01-01 00:00:00'"></countdown-timer>

Countdown with zero trigger:
<countdown-timer (zeroTrigger)="yourOwnFunction()" [end]="'2018-01-01 00:00:00'"></countdown-timer>
```

## Development

To generate all `*.js`, `*.d.ts` and `*.metadata.json` files:

```bash
$ npm run build
```

To lint all `*.ts` files:

```bash
$ npm run lint
```

## License

MIT © [MJP](mailto:markangelpenaranda@gmail.com)
npm package: @lokeshc/react-tiktok-oauth
Description: React components for TikTok OAuth authentication
Author: Lokesh C lokeshcdckap@gmail.com
Latest version: 1.2.0

# react-tiktok-oauth

A simple React package for TikTok OAuth login.  
⚠️ Requires a backend server to securely exchange the `code` for an `access_token`.

---

## Installation

```bash
npm i @lokeshc/react-tiktok-oauth
# or
yarn add @lokeshc/react-tiktok-oauth

Features

TikTok OAuth 2.0 with PKCE flow

imple <TikTokLoginButton /> component

React hook useTikTokAuthCode() to capture OAuth code or error

Works with any backend (Laravel, Express, etc.)

Auto-cleans URL after code is captured


Quick Start
1. Add TikTok App credentials

Go to TikTok Developer Portal
 and create an app.

Copy your Client Key (a.k.a. client_id)

Add your redirect URI (must match exactly in TikTok app settings and your code)

Use in React App For Example Usage

import React, { useEffect, useState } from "react";
import { TikTokLoginButton, useTikTokAuthCode } from "@lokeshc/react-tiktok-oauth";
import axios from "axios";

function App() {
  const { code, error } = useTikTokAuthCode();
  const [data, setData] = useState<any>(null);
  const [err, setErr] = useState<string | null>(null);

  useEffect(() => {
    if (error) {
      setErr(error);
      return;
    }

    if (code) {
      // Send code to your backend for token exchange
      axios.post("https://yourdomain.com/api/tiktok/callback", { code })
        .then(res => setData(res.data))
        .catch(e => setErr(e.response?.data || e.message));

      // Clean URL so ?code=xxxx disappears
      window.history.replaceState({}, document.title, "/");
    }
  }, [code, error]);

  return (
    <div>
      <h1>React TikTok OAuth Example</h1>

      <TikTokLoginButton
        clientId="YOUR_TIKTOK_CLIENT_KEY"
        redirectUri="https://yourdomain.com/tiktok/callback" // passing Frontend Redirect URI
      />

      {code && <p>OAuth Code: {code}</p>}
      {data && <pre>{JSON.stringify(data, null, 2)}</pre>}
      {err && <p style={{color: "red"}}>{err}</p>}
    </div>
  );
}

export default App;


Notes

TikTok does not allow implicit flow → you always need a backend to exchange the code for tokens.

Keep your client_secret safe in the backend.

Use ngrok or another HTTPS tunnel when testing locally, since TikTok requires HTTPS redirects.

License

MIT © 2025 Lokesh C
npm package: @lokeshpahal/alert-variant-tune
Description: Editor.js Alert Tune allows applying one of defined text alert variant: **Info**, **Warning**, and **Danger** to any block.
Author: Lokesh Pahal
Latest version: 1.0.3

# Text Variant Tune

Editor.js Alert Tune allows applying one of defined text alert variant: **Info**, **Warning**, and **Danger** to any block.

## How to use

1. Install

```js
yarn add @editorjs/text-variant-tune
```

2. Connect

```js
import EditorJS from '@editorjs/editorjs';
import AlertVariantTune from 'lokeshpahal/text-alert-tune';

/**
 * Editor.js configuration
 */
const editor = new EditorJS({
  /**
   * Connect tool
   */
  tools: {
    alertVariant: AlertVariantTune
  },

  /**
   * Apply to all the blocks
   */
  tunes: ['alertVariant'],

  // ...
})
```

Optionally, you can connect this Tune only for specified blocks:

```js
import EditorJS from '@editorjs/editorjs';
import AlertVariantTune from 'lokeshpahal/text-alert-tune';

/**
 * Editor.js configuration
 */
const editor = new EditorJS({
  tools: {
    alertVariant: AlertVariantTune,
    paragraph: { // apply only for the 'paragraph' tool
      tunes: ['alertVariant'],
    }
  },
})
```
npm package: @lokeshpahal/editorjs-button-link
Description: Button to set link and text for Editor.js
Author: Lokesh Pahal
Latest version: 1.0.5

# Set Link and Text and Generate button plugin for Editor.js

## How to use

1. Install

```js
yarn add @lokeshpahal/editorjs-button-link
```

2. Connect

Add a new Tool to the `tools` property of the Editor.js initial config.

```javascript
tools: {
        ButtonLink: {
          class: ButtonLink,
          inlineToolbar: false,
          config:{
            css:{
              "btnColor": "btn--gray",
            }
          }
        },
      },
      i18n: {
        messages: {
          tools: {
            "ButtonLink": {
              'Button Text': 'My Button',
              'Link Url': 'https://lokeshpahal.com',
              'Set': "To set",
              'Default Button': "Default",
            }
          }
        },
      },
}
```

## Config Params

`i18n` overwrite if want to change default placeholder text,

```
i18n: {
    messages: {
      tools: {s
        "ButtonLink": {
          'Button Text': 'My Button',
          'Link Url': 'https://lokeshpahal.com',
          'Set': "To set",
          'Default Button': "Default",
        }
      }
    },
},
```

if customize css, input filed, button design, and etc...

```
config:{
    css:{
      "btnColor": "btn--gray",
    }
}
```

## Output data

| Field  | Type     | Description      |
| ------ | -------- | ---------------- |
| link   | `string` | Exclusion HTML Tag text |
| text   | `string` | Exclusion HTML Tag text |


```json
{
            "type" : "ButtonLink",
            "data" : {
                "link" : "https://editorjs.io/",
                "text" : "editorjs official"
            }
        }
```
npm package: @lokeshpahal/editorjs-columns-imp
Description: Columns, for EditorJS
Author: Lokesh P
Latest version: 0.2.5

# @calumk/editorjs-Columns

A **BETA** plugin which allows the user to have columns

> Pull requests welcomed!

## Installation


> npm i @calumk/editorjs-columns


> https://cdn.jsdelivr.net/npm/@calumk/editorjs-columns@latest


## Demo

![demo](assets/demo.gif)

## Features 

* [x] Support new vertical menu style
* [x] Save/Load
* [x] Support for 2 colums
* [x] Support for 3 columns
    * [x] Migrate storage to array
    * [x] Add tool to change type
    * [x] Added tool to switch/roll arrays
* [ ] Refactor code for legibility
* [ ] Tests



## ChangeLog

> 16/05/22 - Removed global tool varable. Switched to config variable for column tools (see Example)
> ~~22/05/22 - EditorJs must now be passed as instance through tool to child, to avoid duplicate editorjs installs~~ - Rolled Back 


# Known Bugs
* Pressing enter key inside a column, will exit the column 
    * Can be solved (sort-of) by using @calumk/editorjs-paragraph-linebreakable
* Pressing tab key inside column will launch both column, and parent tools
* Copy/Pasting can cause duplication of data in the wrong place
* ~~z-index issues with toolboxes~~
* ~~Tools are hosted as global var~~
* ~~All Styling is currently only in the example.html~~
    * ~~Column styling should move to plugin~~
    * ~~Opinionaited styling (Borders, rounded corners, hover shaddow) will remain in example.html~~
* ~~SVG logo is not rendering correctly in new vertical menu~~


## Docs
None yet, see example/example.html for useage.


---

> Note : Tools are passed to editorjs-columns using config.tools property

```javascript
// first define the tools to be made avaliable in the columns
let column_tools = {
    header: Header,
    alert : Alert,
    paragraph : editorjsParagraphLinebreakable,
    delimiter : Delimiter
}

// next define the tools in the main block
// Warning - Dont just use main_tools - you will probably generate a circular reference 
let main_tools = {
// Load Official Tools
    header: Header,
    alert : Alert,
    paragraph : editorjsParagraphLinebreakable,
    delimiter : Delimiter,

    columns : {
        class : editorjsColumns,
        config : {
          tools : column_tools, // IMPORTANT! ref the column_tools
        }
      },
}


editor = new EditorJS({
    tools : main_tools,
});
```
npm package: @lokeshpahal/editorjs-timesheet
Description: Table for Editor.js
Author: Lokesh Pahal
Latest version: 1.0.5

# Table tool

The Table Block for the [Editor.js](https://editorjs.io). Finally improved.

![](https://capella.pics/41294cec-a2b3-4157-8399-ffefed3d8ffd.jpg)

## Installation

Get the package

```shell
npm i --save @editorjs/table
```
or

```shell
yarn add @editorjs/table
```

## Usage

Add a new Tool to the `tools` property of the Editor.js initial config.

```javascript
import Table from '@editorjs/table';

var editor = EditorJS({
  tools: {
    table: Table,
  }
});
```

Or init the Table tool with additional settings

```javascript
var editor = EditorJS({
  tools: {
    table: {
      class: Table,
      inlineToolbar: true,
      config: {
        rows: 2,
        cols: 3,
      },
    },
  },
});
```

## Config Params

| Field              | Type     | Description          |
| ------------------ | -------- | ---------------------------------------- |
| `rows`             | `number` | initial number of rows. `2`  by default |
| `cols`             | `number` | initial number of columns. `2` by default |

## Output data

This Tool returns `data` in the following format

| Field          | Type         | Description           |
| -------------- | ------------ | ----------------------------------------- |
| `withHeadings` | `boolean`    | Uses the first line as headings |
| `content`      | `string[][]` | two-dimensional array with table contents |

```json
{
  "type" : "table",
  "data" : {
    "withHeadings": true,
    "content" : [ [ "Kine", "Pigs", "Chicken" ], [ "1 pcs", "3 pcs", "12 pcs" ], [ "100$", "200$", "150$" ] ]
  }
}
```

# Support maintenance 🎖

If you're using this tool and editor.js in your business, please consider supporting their maintenance and evolution.

[http://opencollective.com/editorjs](http://opencollective.com/editorjs)

# About CodeX

<img align="right" width="120" height="120" src="https://codex.so/public/app/img/codex-logo.svg" hspace="50">

CodeX is a team of digital specialists around the world interested in building high-quality open source products on a global market. We are [open](https://codex.so/join) for young people who want to constantly improve their skills and grow professionally with experiments in leading technologies.

| 🌐 | Join  👋  | Twitter | Instagram |
| -- | -- | -- | -- |
| [codex.so](https://codex.so) | [codex.so/join](https://codex.so/join) |[@codex_team](http://twitter.com/codex_team) | [@codex_team](http://instagram.com/codex_team) |
npm package: @lokeshpathrabe/axiosservice
Description: APIService based on axios to manage auto refresh of auth tokens and retries on failure
Author: lokeshpathrabe
Latest version: 1.0.3

# AxiosService

An API service based on axios lib with auto refresh of auth tokens and retry for failed APIs. It uses axios [interceptors](https://github.com/axios/axios#interceptors) to implement refresh token and retry logic.

Create axios instance using this library and make API calls as you would do. Just provide some configuration needed to fetch the auth token and the library takes care of all scenarios related to auth failure.

## Installation

npm i @lokeshpathrabe/axiosservice

## Usage

Create a new axios instance like below

```js
const apiServiceConfig = {

};

/**
 * Axios Instance
 */

export const BaseApiInstance = new AxiosService(
  {
    timeout: 300000,
    baseURL: 'https://baseAPi.url/',
  },
  {
	  requestInterceptors: [...],
	  responseSuccessInterceptors: [...],
	  responseErrorInterceptors: [...],
	  tokenRetryCount: 1,
	  authFailedStatus: [403, 401],
	  checkTokenExpired: (error) => error.response.data.code === 'SESSION_EXPIRED'
	  onSessionExpired: (error) => redirectToUrl(error.response.data.redirectUrl)
	  refreshAccessToken: () => {
		 // Fetch new auth token
		return fetch('https://tokne-url/get')
		.then(response => {
		// Logic to update new token for upcoming API calls
		});
	}
  },
);
```

## Params

- `authFailedStatus*`: (mandatory) Array of status to check for expired auth token eg `[403, 402]`. The status must be a error status.
- `checkTokenExpired`: (optional) Function to give custom logic to identify auth failure in API. axios error object is passed as param to this function.

```js
const checkTokenExpired = (error) => {
  const { status, data } = error.response;
  const { code } = data || {};
  return (
    HTTP_STATUS.ACCESS_TOKEN_INVALID_STATUS.indexOf(status) > -1 ||
    SESSION_EXPIRED_ERRORS.indexOf(code) > -1
  );
};
```

- `refreshAccessToken`: (mandatory) Function with logic to make the API call for auth token. This function must return a Promise. If you use try-catch block you must rethrow Promise.reject from catch block to make the retry of refreshAccessToken work.
- `tokenRetryCount`: (optional) (Default: 1)Number of time auth token call should be retried incase we get `authFailedStatus` or true `checkTokenExpired` in response of call made by `refreshAccessToken`
- `onSessionExpired`: (optional) Function with logic of what to do when session expired and auth token fails in all `tokenRetryCount` attempts.
- `requestInterceptors`: (optional) Array with request interceptors for axios
- `responseSuccessInterceptors`:: (optional) Array with response interceptors for axios when API return HTTP200
- `responseErrorInterceptors`:(optional) Array with response interceptors for axios when API return error
npm package: @lokibai/create-vue-library
Description: CLI for creating reusable, modern Vue libraries using Rollup;
Author: uniquexiaobai
Latest version: 0.1.0

# Create Vue Library

> CLI for creating reusable, modern Vue libraries using Rollup.

### Quick start

```bash
npx @lokibai/create-vue-library mylib
cd mylib
npm start
```
npm package: @lokibai/leetcode-spider
Description: > Leetcode solutions spider.
Author: uniquexiaobai@gmail.com
Latest version: 1.2.0

# @lokibai/leetcode-spider

> Leetcode solutions spider.

[![NPM](https://img.shields.io/npm/v/@lokibai/leetcode-spider.svg)](https://www.npmjs.com/package/@lokibai/leetcode-spider)

## Install

```bash
npm i @lokibai/leetcode-spider
```

## Usage

`.leetcode.json`
```json
{
	"username": "xxx",
	"password": "xxx",
	"dist": "./docs/solutions"
}
```

```bash
$ leetcode-spider
```
npm package: @lokibai/react-input
Description: input with compositionStart,compositionUpdate,compositionEnd for ime like Chinese input
Author: @uniquexiaobai
Latest version: 0.1.1

# @lokibai/react-input

> input with compositionStart,compositionUpdate,compositionEnd for ime like Chinese input

> See https://github.com/facebook/react/issues/3926

[![NPM](https://img.shields.io/npm/v/@lokibai/react-input.svg)](https://www.npmjs.com/package/@lokibai/react-input)

## Install

```bash
npm install --save @lokibai/react-input
```

## Usage

```jsx
import React from 'react';
import { Input Textarea } from '@lokibai/react-input';

const MyInput = () => {
  const [value, setValue] = React.useState('');
  const onChange = value => {
    setValue(value);
  };

  return <Input value={value} onChange={onChange} />;
};

const MyTextarea = () => {
  const [value, setValue] = React.useState('');
  const onChange = value => {
    setValue(value);
  };

  return <Textarea value={value} onChange={onChange} />;
};
```

## License

MIT © [](https://github.com/)
npm package: @lokibai/react-store
Description: state management for react
Author: uniquexiaobai@gmail.com
Latest version: 0.2.2

# @lokibai/react-store

> state management for react

[![NPM](https://img.shields.io/npm/v/@lokibai/react-store.svg)](https://www.npmjs.com/package/@lokibai/react-store)

## Install

```bash
npm install --save @lokibai/react-store
```

## Usage

```jsx
// index.js
import React from 'react';
import { configureStore, Provider } from '@lokibai/react-store';
import App from './app';

const reducer = (state, action = {}) => {
	const { type } = action;

	switch (type) {
		case 'increase':
			return { ...state, count: state.count + 1 };
		case 'decrease':
			return { ...state, count: state.count - 1 };
		default:
			return state;
	}
};

const store = configureStore({reducer, preloadedState: { count: 10 });

ReactDOM.render(
	<Provider store={store}>
		<App />
	</Provider>,
	document.getElementById('root')
);
```

```jsx
// app.js
import React from 'react';
import { useSelector, useDispatch } from '@lokibai/react-store';

const App = () => {
  const count = useSelector(state => state.count);
  const dispatch = useDispatch();

  const increase = () => {
    dispatch({ type: 'increase' });
  };

  const decrease = () => {
    dispatch({ type: 'decrease' });
  };

  return (
    <div>
      <span>{count}</span>
      <button onClick={increase}>+</button>
      <button onClick={decrease}>-</button>
    </div>
  );
};

export default App;
```

## License

MIT © [](https://github.com/)
npm package: @lokibai/react-use-copy-clipboard
Description: copy to clipboard
Author: uniquexiaobai@gmail.com
Latest version: 1.0.5

# @lokibai/react-use-copy-clipboard

> copy to clipboard

[![NPM](https://img.shields.io/npm/v/@lokibai/react-use-copy-clipboard.svg)](https://www.npmjs.com/package/@lokibai/react-use-copy-clipboard) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash
npm install --save @lokibai/react-use-copy-clipboard
```

## Usage

```jsx
import React from 'react';
import { useCopyClipboard } from '@lokibai/react-use-copy-clipboard';

const App = () => {
	const [isCopied, setCopied] = useCopyClipboard('initial text');

	const handleClick = () => {
		// setCopied('text');
		setCopied();
	};

	return (
		<button onClick={handleClick}>Was it copied? {isCopied ? 'Yes! 👍' : 'Nope! 👎'}</button>
	);
};
```

## License

MIT © [](https://github.com/)

---

This hook is created using [create-react-library](https://github.com/udilia/create-react-library).
npm package: @lokibai/react-use-hooks
Description: react hooks
Author: uniquexiaobai@gmail.com
Latest version: 0.1.4

# @lokibai/react-use-hooks

> react hooks

[![NPM](https://img.shields.io/npm/v/@lokibai/react-use-hooks.svg)](https://www.npmjs.com/package/@lokibai/react-use-hooks)

## Install

```bash
npm i @lokibai/react-use-hooks
```

## Usage

```jsx
import React from 'react';
import { useBoolean } from '@lokibai/react-use-hooks';

const App = () => {
  const [on, toggle] = useBoolean();

  const onToggle = () => {
    toggle();
  };

  return <button onClick={onToggle}>{String(on)}</button>;
};
```

## Index

- [x] useMounted
- [x] useBoolean
- [x] useDebounce
- [x] useThrottle
- [x] useCopyClipboard
- [x] useInViewport

## License

MIT © [](https://github.com/)
npm package: @lokibai/tiny-storage
Description: > A tiny localStorage API
Author: @uniquexiaobai
Latest version: 0.1.3

# tinyStorage

> A tiny localStorage API

### Install

```bash
npm install @lokibai/tiny-storage
```

### Usage

```js
import tinyStorage from '@lokibai/tiny-storage';
// const tinyStorage = require('tiny-storage');

tinyStorage.get('a', 1);
tinyStorage.set('b', { x: 2 });
tinyStorage.set('c', 3, { maxAge: 60 }); // expires after 1 minute

tinyStorage.get('b'); // output: { x: 2}

tinyStorage.remove('a'); // remove a item

tinyStorage.size(); // output: 2

tinyStorage.clear(); // remove all items

tinyStorage.size(); // output: 0

// create a new instance, different instance don't affect each other
const instance = tinyStorage.create({
  name: 'mystorage', // prefix for the key
  driver: sessionStorage, // default: localStorage
  maxAge: 60, // set the default maxAge
});
```