open-index/open-npm huggingface dataset:
npm package: @jdomizio/react-class
Description: A carefully crafted base class for all your React components 
Author: Zippy Technologies
Latest version: 3.2.0

# react-class

> Smart Auto-Binding for your React components.

## Features

 * auto-bind methods
 * optimized to only auto-bind non-lifecycle methods

## Install

```sh
$ npm install react-class --save
```

## Usage

Instead of extending `React.Component` you have to extend the class exported by `react-class`.

```jsx
import Component from 'react-class'
// or import { Component } from 'react-class

class MyApp extends Component {
  render() {
    return <div {...props} onClick={this.onClick}>
      //onClick is auto-bound to "this", so you can keep your code dry
    </div>
  }

  onClick(){
    console.log(this)
    // this is correctly bound to the component instance
  }
}
```

## `autoBind` only

If you don't want to extend the class exported by `react-class` and instead just want autobinding, you can just import the `autoBind` function directly.

```jsx
import 'react-class/autoBind'

// or

import { autoBind } from 'react-class'

// or

var autoBind = require('react-class/autoBind')
````

After importing/require-ing it, call `autoBind` in the component constructor:

```jsx
import autoBind from 'react-class/autoBind'

class MyApp extends React.Component {
  constructor(props) {
    super(props)

    autoBind(this)
  }

  render() {
    // ... your rendering logic
  }
}
```

### autoBind filtering

`autoBind` supports a second param, that can be used to filter what gets auto-binding or not. It can be a function or an object.

 * `autoBind(obj, filterFn)` - only those methods in `obj` are bound to the object for which the `filterFn` returns true
 * `autoBind(obj, skipObject)` - the methods whose names are found in the `skipObject` as truthy are skipped from autobinding. Eg: `autoBind(obj, { notBound: true, log: true })` will not bind the `obj.notBound` and `obj.log` methods to the `obj` object. 

## FAQ

### What problems does it solve?

Autobinding, which is a nice-to-have feature!

### What if I want to remove it in the future?

`react-class` is a very thin layer around `React.Component`, so just in case you decide removing it in the future, you'll be safe and will only have to do very minor code changes.

We're not doing anything magical!


## LICENSE

#### MIT
npm package: @jdorg/jloading
Description: 一个基于vue的“菊花转”组件
Author: jdongchen
Latest version: 0.1.1

# jloading

一个基于vue的“菊花转”组件

## 安装

```shell
npm install @jdorg/jloading --save
```

## 使用

引入：

```ts
import JLoading from '@jdorg/jloading'
import '@jdorg/jloading/dist/jloading.css'

Vue.use(JLoading)
```
然后使用vue指令:

```ts
/**
 * @directive
 * @name jloading
 * @arg{ jloadingSetup } setup 配置jloading
 * @value{ boolean } isLoading jloading是否显示
 * @modifiers full 是否全屏显示
*/
v-jloading:[setup].full="isLoading" 
```
## 说明

接口：
```ts
interface jloadingSetup {
  background?: string; // 与css一致
  color?:string; // 与css一致
}
```

## example

```html
<div id="app">
  <div class="stage" v-jloading:[setup]="isLoading">
    <span>This is jloading!!!</span>
  </div>
  <button class="btn" @click="click">点我改变状态</button>
</div>
```

```ts
public setup:jloadingSetup = {
  background: '#E3F7EBdd',
  color:'#000'
}

public isLoading:boolean = false

public click():void {
  this.isLoading = !this.isLoading
}
```

```less
#app {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}
.stage {
  width: 500px;
  height: 500px;
  border: 1px solid #000;
  margin-bottom: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.btn {
  width: 200px;
  height: 80px;
}
```
![example](https://raw.githubusercontent.com/isJDongYa/jloading/master/src/assets/example.gif)

## others

@jdorg是一个开源前端组件的社区，如果你有开源组件的想法，欢迎加入我们

![qqgroup](https://raw.githubusercontent.com/isJDongYa/jloading/master/src/assets/@jdorg_z_rs.jpg)
npm package: @jdorg/jmoremsg
Description: 一个基于vue的“更多信息”的单个组件
Author: jdongchen
Latest version: 0.1.5

# jmoremsg

- 一个基于vue的“更多信息”的单个组件
- 根据包裹组件所在位置自动调整显示位置
- 默认显示位置为right-bottom, 距离鼠标指针 [ 3px, 3px ], 请注意，该默认位置并未提供修改prop

## setup

```shell
npm install @jdorg/jmoremsg --save

import JDMoremsg from '@jdorg/jmoremsg'

Vue.use(JDMoremsg) 
```

## Props

|props|描述|备注|
|---|---|---|
|[text](#text)|设置文本|none|
|[setup](#setup)|设置基本属性|none|
|[follow](#follow)|设置跟随性质|none|

### text

该prop用来设置要显示的更多信息

> @Prop({default: ''}) private text?:string; 


### setup

该prop用来设置一些基本属性

> @Prop() private setup?:Setup;

```ts
interface Setup {
  duration?:number; // 隔多久显示
  width?:string; // 宽度， 与css属性一致
  height?:string; // 高度， 与css属性一致
  background?:string; // 背景， 与css属性一致
}
```

默认值：

```ts
private defaultSetup:Setup = {
  duration: 2000,
  width: 'auto',
  height: 'auto',
  background: '#fff'
}
```

### follow

该prop用来设置此组件的跟随性质，默认为空字符串

> @Prop({default: ''}) private follow?:string;  

|可选值|状态|备注|
|---|---|---|
|'follow'|鼠标在组件内部移动时moremsg会跟随移动，当mouseleave时消失|none|
|'none'|鼠标在组件内移动时mroemsg会马上消失|none|
|''|鼠标在组件内部移动时moremsg不会消失，当mouseleave时消失|default|

## Slots

### default

要让鼠标在上面经过duration显示moremsg包裹的内容

```html
<slot></slot>
```

### custom

可自定义显示内容，如果此slot和名为text的prop同时存在，此slot会显示在text上方

```html
<slot name="custom"></slot>
<div class="more-msg-text">{{ text }}</div> <!--如上所言， text是在名为custom的slot下方定义的-->
```

## example

```html
<jmoremsg 
text="This is more message" 
:setup="{ background:'#ddd' }"
follow="follow"
>
  <img class="img" slot="custom" src="./assets/imgs/header.jpg" alt="img">
  <button class="btn">This is a button in default slot</button>
</jmoremsg>
```

```less
.btn {
  height: 100px;
}
.img {
  width: 300px;
}
```

![example](https://raw.githubusercontent.com/isJDongYa/jmoremsg/master/examples/assets/imgs/example.gif)

## others

@jdorg是一个开源前端组件的社区，如果你有开源组件的想法，欢迎加入我们

![qqgroup](https://raw.githubusercontent.com/isJDongYa/jmoremsg/master/examples/assets/imgs/@jdorg_z_rs.jpg)
npm package: @jdorg/jnotice
Description: 一个基于vue的“通知”组件
Author: jdongchen
Latest version: 0.1.4

# jnotice

## 安装

```shell
npm install @jdorg/jnotice --save
```

## 使用

先引入：

```js
import JNotice from '@jdorg/jnotice'

import '@jdorg/jnotice/dist/jnotice.css'

Vue.use(JNotice)
```

然后在vue实例中：

```js
this.$jnotice(setup:jnoticeSetup) // setup 为jnoticeSetup类型的对象
```

## 说明

接口：
```ts
interface jnoticeSetup {
  text?:string;   // 要显示的文字
  duraiton?:number; // 多久会消失
  position?:'top'|'bottom'|'t-left'|'b-left'|'t-right'|'b-right'; // 所在位置
  background?:string; // 与css一致
  color?:string; // 与css一致
  width?:string; // 与css一致
  mheight?:string; // 与css min-height一致
  type?:'info'|'success'|'error';  // icon 类型
}
```

默认值：

```ts
const jnoticeDefaultSetup:jnoticeSetup = {
  text: 'This is jnotice!',
  duraiton: 3000,
  position: 'top',
  background: '#ddd',
  color: '#000',
  width: '400px',
  mheight: '50px',
  type: 'info'
}
```

## example

```html
<div id="app">
  <button class="btn" @click="click">Click to jnotice!</button>
</div>
```

```ts
export default class App extends Vue {
  public click() {
    this.$jnotice({
      background: '#424242',
      color: '#fff',
      position: 'top'
    })
  }
}
```

```less
#app {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.btn {
  width: 200px;
  height: 80px;
}
```

![example](https://raw.githubusercontent.com/isJDongYa/jnotice/master/src/assets/example.gif)

## others

@jdorg是一个开源前端组件的社区，如果你有开源组件的想法，欢迎加入我们

![qqgroup](https://raw.githubusercontent.com/isJDongYa/jnotice/master/src/assets/@jdorg_z_rs.jpg)
npm package: @jdow/utils
Description: [![NPM version](https://img.shields.io/npm/v/@jdow/utils?color=a1b858&label=)](https://www.npmjs.com/package/@jdow/utils)
Author: Jack Dow
Latest version: 0.2.2

# @jdow/utils

[![NPM version](https://img.shields.io/npm/v/@jdow/utils?color=a1b858&label=)](https://www.npmjs.com/package/@jdow/utils)

Opinionated collection of common TypeScript utils types/functions by [@jdow](https://github.com/jdow).

> This package is designed to be used as `devDependencies` and bundled into your dist.
npm package: @jdozierezell/tailwindcss-typography
Description: A Tailwind CSS plugin for automatically styling plain HTML content with beautiful typographic defaults.
Latest version: 0.0.1

<p>
  <a href="https://tailwindcss.com/docs/typography-plugin#gh-light-mode-only" target="_blank">
    <img src="./.github/logo-light.svg" alt="Tailwind CSS Typography" width="450" height="70">
  </a>
  <a href="https://tailwindcss.com/docs/typography-plugin#gh-dark-mode-only" target="_blank">
    <img src="./.github/logo-dark.svg" alt="Tailwind CSS Typography" width="450" height="70">
  </a>
</p>

A plugin that provides a set of `prose` classes you can use to add beautiful typographic defaults to any vanilla HTML you don't control, like HTML rendered from Markdown, or pulled from a CMS.

---

## Documentation

For full documentation, visit [tailwindcss.com/docs/typography-plugin](https://tailwindcss.com/docs/typography-plugin).

## Community

For help, discussion about best practices, or any other conversation that would benefit from being searchable:

[Discuss the Tailwind CSS Typography plugin on GitHub](https://github.com/tailwindlabs/tailwindcss/discussions)

For casual chit-chat with others using the framework:

[Join the Tailwind CSS Discord Server](https://tailwindcss.com/discord)
npm package: @jdp-dev/commitlint-config
Description: My shareable commitlint config.
Author: John Darryl Pelingo
Latest version: 1.4.0

# @jdp-dev/commitlint-config [![GitHub Build Status][shield-github-build-status]][shield-github-build-status] [![npm][shield-npm]][npm] [![MIT License][shield-license]][license]

My shareable [commitlint](https://commitlint.js.org/)
[config](https://commitlint.js.org/#/reference-configuration).

## Installation

```shell script
npm install --save-dev @jdp-dev/commitlint-config
```

or

```shell script
yarn add --dev @jdp-dev/commitlint-config
```

## Usage

Add `@jdp-dev/commitlint-config` to the `"extends"` array in your `.commitlintrc.*`
file.

<!-- prettier-ignore -->
```javascript
module.exports = {
  extends: ['@jdp-dev/commitlint-config']
}
```

Or, you can use it in other ways as described in the
[official documentation](https://commitlint.js.org/#/reference-configuration?id=shareable-configuration).

## License

[MIT][license] &copy; [John Darryl Pelingo][me]

[license]: ../../LICENSE
[me]: https://johndpelingo.com/
[npm]: https://npmjs.org/package/@jdp-dev/commitlint-config
[shield-github-build-status]:
  https://github.com/john-d-pelingo/jdp-scripts/workflows/npm-publish/badge.svg
[shield-license]: https://img.shields.io/badge/License-MIT-lavender.svg
[shield-npm]: https://img.shields.io/npm/v/@jdp-dev/commitlint-config.svg
npm package: @jdp-dev/eslint-config
Description: My shareable ESLint config for JavaScript projects.
Author: John Darryl Pelingo
Latest version: 1.4.0

# @jdp-dev/eslint-config [![GitHub Build Status][shield-github-build-status]][shield-github-build-status] [![npm][shield-npm]][npm] [![MIT License][shield-license]][license]

My shareable [ESLint](https://eslint.org/)
[config](https://eslint.org/docs/user-guide/configuring) for
[JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript) projects.

## Installation

```shell script
npm install --save-dev @jdp-dev/eslint-config
```

or

```shell script
yarn add --dev @jdp-dev/eslint-config
```

## Usage

Add `@jdp-dev/eslint-config` to the `"extends"` array in your `.eslintrc.*`
file.

<!-- prettier-ignore -->
```json
{
  "extends": [
    "some-other-config-you-use",
    "@jdp-dev/eslint-config"
  ]
}
```

## License

[MIT][license] &copy; [John Darryl Pelingo][me]

[license]: ../../LICENSE
[me]: https://johndpelingo.com/
[npm]: https://npmjs.org/package/@jdp-dev/eslint-config
[shield-github-build-status]:
  https://github.com/john-d-pelingo/jdp-scripts/workflows/npm-publish/badge.svg
[shield-license]: https://img.shields.io/badge/License-MIT-lavender.svg
[shield-npm]: https://img.shields.io/npm/v/@jdp-dev/eslint-config.svg
npm package: @jdp-dev/eslint-config-typescript
Description: My shareable ESLint config for TypeScript projects.
Author: John Darryl Pelingo
Latest version: 1.4.0

# @jdp-dev/eslint-config-typescript [![GitHub Build Status][shield-github-build-status]][shield-github-build-status] [![npm][shield-npm]][npm] [![MIT License][shield-license]][license]

My shareable [ESLint](https://eslint.org/)
[config](https://eslint.org/docs/user-guide/configuring) for
[TypeScript](https://www.typescriptlang.org/) projects.

## Installation

```shell script
npm install --save-dev @jdp-dev/eslint-config-typescript
```

or

```shell script
yarn add --dev @jdp-dev/eslint-config-typescript
```

## Usage

Add `@jdp-dev/eslint-config-typescript` to the `"extends"` array in your
`.eslintrc.*` file.

<!-- prettier-ignore -->
```json
{
  "extends": [
    "some-other-config-you-use",
    "@jdp-dev/eslint-config-typescript"
  ]
}
```

## License

[MIT][license] &copy; [John Darryl Pelingo][me]

[license]: ../../LICENSE
[me]: https://johndpelingo.com/
[npm]: https://npmjs.org/package/@jdp-dev/eslint-config-typescript
[shield-github-build-status]:
  https://github.com/john-d-pelingo/jdp-scripts/workflows/npm-publish/badge.svg
[shield-license]: https://img.shields.io/badge/License-MIT-lavender.svg
[shield-npm]: https://img.shields.io/npm/v/@jdp-dev/eslint-config-typescript.svg
npm package: @jdp-dev/eslint-config-typescript-react
Description: My shareable ESLint config for TypeScript React projects.
Author: John Darryl Pelingo
Latest version: 1.4.0

# @jdp-dev/eslint-config-typescript-react [![GitHub Build Status][shield-github-build-status]][shield-github-build-status] [![npm][shield-npm]][npm] [![MIT License][shield-license]][license]

My shareable [ESLint](https://eslint.org/)
[config](https://eslint.org/docs/user-guide/configuring) for
[TypeScript](https://www.typescriptlang.org/) [React](https://reactjs.org/)
projects.

## Installation

```shell script
npm install --save-dev @jdp-dev/eslint-config-typescript-react
```

or

```shell script
yarn add --dev @jdp-dev/eslint-config-typescript-react
```

## Usage

Add `@jdp-dev/eslint-config-typescript-react` to the `"extends"` array in your
`.eslintrc.*` file.

<!-- prettier-ignore -->
```json
{
  "extends": [
    "some-other-config-you-use",
    "@jdp-dev/eslint-config-typescript-react"
  ]
}
```

## License

[MIT][license] &copy; [John Darryl Pelingo][me]

[license]: ../../LICENSE
[me]: https://johndpelingo.com/
[npm]: https://npmjs.org/package/@jdp-dev/eslint-config-typescript-react
[shield-github-build-status]:
  https://github.com/john-d-pelingo/jdp-scripts/workflows/npm-publish/badge.svg
[shield-license]: https://img.shields.io/badge/License-MIT-lavender.svg
[shield-npm]:
  https://img.shields.io/npm/v/@jdp-dev/eslint-config-typescript-react.svg
npm package: @jdp-dev/prettier-config
Description: My shareable Prettier config.
Author: John Darryl Pelingo
Latest version: 1.4.0

# @jdp-dev/prettier-config [![GitHub Build Status][shield-github-build-status]][shield-github-build-status] [![npm][shield-npm]][npm] [![MIT License][shield-license]][license]

My shareable [Prettier](https://prettier.io/)
[config](https://prettier.io/docs/en/configuration.html).

## Installation

```shell script
npm install --save-dev @jdp-dev/prettier-config
```

or

```shell script
yarn add --dev @jdp-dev/prettier-config
```

## Usage

Reference `@jdp-dev/prettier-config` in your `package.json`.

<!-- prettier-ignore -->
```json
{
  "name": "my-cool-js-app",
  "version": "69.420",
  "prettier": "@jdp-dev/prettier-config"
}
```

Or, you can use it in other ways as described in the
[official documentation](https://prettier.io/docs/en/configuration.html#sharing-configurations).

## License

[MIT][license] &copy; [John Darryl Pelingo][me]

[license]: ../../LICENSE
[me]: https://johndpelingo.com/
[npm]: https://npmjs.org/package/@jdp-dev/prettier-config
[shield-github-build-status]:
  https://github.com/john-d-pelingo/jdp-scripts/workflows/npm-publish/badge.svg
[shield-license]: https://img.shields.io/badge/License-MIT-lavender.svg
[shield-npm]: https://img.shields.io/npm/v/@jdp-dev/prettier-config.svg
npm package: @jdp-dev/tsconfig
Description: My shareable TypeScript config.
Author: John Darryl Pelingo
Latest version: 1.4.0

# @jdp-dev/tsconfig [![GitHub Build Status][shield-github-build-status]][shield-github-build-status] [![npm][shield-npm]][npm] [![MIT License][shield-license]][license]

My shareable [TypeScript](https://www.typescriptlang.org/)
[config](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html).

## Installation

```shell script
npm install --save-dev @jdp-dev/tsconfig
```

or

```shell script
yarn add --dev @jdp-dev/tsconfig
```

## Usage

Reference it in your `tsconfig.json`.

TypeScript projects:

<!-- prettier-ignore -->
```json
{
  "extends": "@jdp-dev/tsconfig"
}
```

TypeScript + React projects for development:

<!-- prettier-ignore -->
```json
{
  "extends": "@jdp-dev/tsconfig/tsconfig.react.dev.json"
}
```

TypeScript + React projects for production:

<!-- prettier-ignore -->
```json
{
  "extends": "@jdp-dev/tsconfig/tsconfig.react.json"
}
```

## License

[MIT][license] &copy; [John Darryl Pelingo][me]

[license]: ../../LICENSE
[me]: https://johndpelingo.com/
[npm]: https://npmjs.org/package/@jdp-dev/tsconfig
[shield-github-build-status]:
  https://github.com/john-d-pelingo/jdp-scripts/workflows/npm-publish/badge.svg
[shield-license]: https://img.shields.io/badge/License-MIT-lavender.svg
[shield-npm]: https://img.shields.io/npm/v/@jdp-dev/tsconfig.svg