open-index/open-npm huggingface dataset:
npm package: @jdthfe/ivory
Description: [ ![Travis (.org)](https://img.shields.io/travis/jdthfe/eui.svg?style=for-the-badge)](https://travis-ci.com/jdthfe/eui) [ ![Codecov](https://img.shields.io/codecov/c/gh/jdthfe/eui.svg?style=for-the-badge)](https://codecov.io/gh/jdthfe/eui/) ![GitHub top l
Author: likkhappy
Latest version: 0.0.15

# Ivory（Ivory）

[ ![Travis (.org)](https://img.shields.io/travis/jdthfe/eui.svg?style=for-the-badge)](https://travis-ci.com/jdthfe/eui) [ ![Codecov](https://img.shields.io/codecov/c/gh/jdthfe/eui.svg?style=for-the-badge)](https://codecov.io/gh/jdthfe/eui/) ![GitHub top language](https://img.shields.io/github/languages/top/jdthfe/eui.svg?style=for-the-badge) ![GitHub](https://img.shields.io/github/license/jdthfe/eui.svg?style=for-the-badge)

## 快速开发

安装依赖

yarn（推荐）

```bash
yarn install
```

npm

```bash
npm install
```

## 安装依赖常见问题

-   [安装问题](./docs/issues.md)

## 使用

-   [开发新组件](./docs/develop.md)

## 目录结构

[查看完整文件结构](./docs/docsMap.md)

```js
Project
│
├── src              //  组件源码
│   ├── _util            //  工具集
│   ├── [component]      //  单个组件
│   │   ├── __tests__    //  测试文件
│   │   ├── demo         //  用以展示的 demo
│   │   └── style        //  组件样式
│   └── style            //  样式
│
├── site             //  展示页源码
│   ├── _util            //  通用方法
│   ├── assets           //  静态资源
│   ├── document         //  文档页（用以电脑访问）
│   ├── instance         //  实例（用以手机访问）
│   └── style            //  样式
│
├── script           //  开发脚本
│   ├── config           //  webpack config
│   ├── gulp             //  gulp script
│   ├── template         //  组件模板
│   └── tests            //  测试相关
│
├── docs             //  项目文档
├── typings          //  类型文件
│                    //  下列文件夹需要运行对应脚本生成
├── build            //  yarn build，展示页打包代码
├── compiled         //  yarn prod，组件库打包代码
│   ├── dist             //  符合 umd 的代码
│   ├── es               //  符合 es6 模块化的代码
│   └── lib              //  符合 CommonJS 规范的模块化的代码
└── coverage         //  测试覆盖率
    ...
```

## 项目特性

-   提供各种基础方法

-   测试覆盖率 80% 以上
npm package: @jdthornton/classnames
Description: Class string joining made easy
Author: Jake Thornton
Latest version: 1.0.1

# @jdthornton/classnames

[![npm (scoped)](https://img.shields.io/npm/v/@jdthornton/classnames.svg)](https://www.npmjs.com/package/@jdthornton/classnames)
[![npm bundle size (minified)](https://img.shields.io/bundlephobia/min/@jdthornton/classnames.svg)](https://www.npmjs.com/package/@jdthornton/classnames)

Class string joining made easy.

## Install

```
$ npm install @jdthornton/classnames
```

## Usage

```js
import classNames from "@jdthornton/classnames";

function makeClass({ className, primary }){
  return classNames("container", primary && "primary", className)
}

console.log(makeClass({className: "card", primary: true}))

//=> "container primary card"
```
npm package: @jdthornton/modalprovider
Description: React modal context provider with hooks for easy usability
Author: Jake Thornton
Latest version: 1.0.6

# @jdthornton/modalprovider

[![npm (scoped)](https://img.shields.io/npm/v/@jdthornton/modalprovider.svg)](https://www.npmjs.com/package/@jdthornton/modalprovider)
[![npm bundle size (minified)](https://img.shields.io/bundlephobia/min/@jdthornton/modalprovider.svg)](https://www.npmjs.com/package/@jdthornton/modalprovider)

React modal context provider with hooks for easy usability.

## Install

```
$ npm install @jdthornton/modalprovider
```

## Usage

```js
import ModalProvider, { createModal, useModalHandlers } from "@jdthornton/modalprovider";
import Modal from "@jdthornton/animated-modal";
import '@jdthornton/animated-modal/styles.css';

function ModalButton({ modalKey, children }){
  const { open } = useModalHandlers(modalKey)
  return(
    <button onClick={open} type="button">{children}</button>
  )
}

function WelcomeModal({ modalKey }){
  const modal = createModal(modalKey);

  return(
    <AnimatedModal isOpen={modal.isOpen} close={modal.close}>
      Welcome
    </AnimatedModal>
  )
}

function App(){

  return(
    <ModalProvider>
      <ModalButton modalKey="welcome">Open</ModalButton>
      <WelcomeModal modalKey="welcome" />
    </ModalProvider>
  )
}
```
npm package: @jdthornton/portal
Description: React Portal component
Author: Jake Thornton
Latest version: 1.1.3

# @jdthornton/portal

[![npm (scoped)](https://img.shields.io/npm/v/@jdthornton/portal.svg)](https://www.npmjs.com/package/@jdthornton/portal)
[![npm bundle size (minified)](https://img.shields.io/bundlephobia/min/@jdthornton/portal.svg)](https://www.npmjs.com/package/@jdthornton/portal)

React Portal component.

## Install

```
$ npm install @jdthornton/portal
```

## Usage

```js
import Portal from "@jdthornton/portal";

const App = () => (
  <Portal>
    This text is in a portal
  </Portal>
)
```
npm package: @jdthornton/screenwidth
Description: React screen width provider and hooks
Author: Jake Thornton
Latest version: 1.0.8

# @jdthornton/screenwidth

[![npm (scoped)](https://img.shields.io/npm/v/@jdthornton/screenwidth.svg)](https://www.npmjs.com/package/@jdthornton/screenwidth)
[![npm bundle size (minified)](https://img.shields.io/bundlephobia/min/@jdthornton/screenwidth.svg)](https://www.npmjs.com/package/@jdthornton/screenwidth)

React screen width context and hooks.

## Install

```
$ npm install @jdthornton/screenwidth
```

## Usage

```js
import ScreenWidthProvider, { withIsMobile } from "@jdthornton/screenwidth";

const HelloWorld = withIsMobile(({
  isMobile
}) => (
  <div>
    Hello {isMobile ? "Mobile" : "Desktop"} World!
  </div>
), 1024)

function App(){
  return(
    <ScreenWidthProvider>
      <HelloWorld />
    </ScreenWidthProvider>
  )
}
```
npm package: @jdthornton/toast
Description: React toast context and list
Author: Jake Thornton
Latest version: 1.2.8

# @jdthornton/toast

[![npm (scoped)](https://img.shields.io/npm/v/@jdthornton/toast.svg)](https://www.npmjs.com/package/@jdthornton/toast)
[![npm bundle size (minified)](https://img.shields.io/bundlephobia/min/@jdthornton/toast.svg)](https://www.npmjs.com/package/@jdthornton/toast)

React toast context and list component.

## Demo

https://jdthornton.github.io/#/toast

## Install

```
$ npm install @jdthornton/toast
```

## Usage

```js
import { ToastProvider, Toaster, useAddToast } from "@jdthornton/toast";
import '@jdthornton/toast/styles.css';

function AddToastButton(){
  const addToast = useAddToast();
  const handleAddToastButtonClick = () => {
    addToast("Here is a toast to you!")
  }
  return(
    <button type="button" onClick={handleAddToastButtonClick}>
      Add Toast
    </button>
  )
}

function App(){
  return(
    <ToastProvider>
      <Toaster />
      <AddToastButton />
    </ToastProvider>
  )
}
```
npm package: @jdthornton/useanimate
Description: React animation hook
Author: Jake Thornton
Latest version: 1.1.2

# @jdthornton/useanimate

[![npm (scoped)](https://img.shields.io/npm/v/@jdthornton/useanimate.svg)](https://www.npmjs.com/package/@jdthornton/useanimate)
[![npm bundle size (minified)](https://img.shields.io/bundlephobia/min/@jdthornton/useanimate.svg)](https://www.npmjs.com/package/@jdthornton/useanimate)

React animation hook.

## Install

```
$ npm install @jdthornton/useanimate
```

## Usage

```js
import useAnimate from "@jdthornton/useanimate";

function App({ isActive }){

  cosnt { isAnimated, elementProps } = useAnimate(isActive);

  return(
    <div {...elementProps} className={isAnimated ? 'animated' : undefined}>
      Animated
    </div>
  )
}
```
npm package: @jdthornton/usecallbackref
Description: React callback ref hook
Author: Jake Thornton
Latest version: 1.0.2

# @jdthornton/usecallbackref

[![npm (scoped)](https://img.shields.io/npm/v/@jdthornton/usecallbackref.svg)](https://www.npmjs.com/package/@jdthornton/usecallbackref)
[![npm bundle size (minified)](https://img.shields.io/bundlephobia/min/@jdthornton/usecallbackref.svg)](https://www.npmjs.com/package/@jdthornton/usecallbackref)

React callback ref hook.

## Install

```
$ npm install @jdthornton/usecallbackref
```

## Usage

```js
import useCallbackRef from "@jdthornton/usecallbackref";

function App(){
  const ref = useCallbackRef(() => {
    console.log("It's a reference!")
  })

  useEffect(() => {
    ref.current();
  },[ref]);

  return null
}

//=> "It's a reference!"

```
npm package: @jdthornton/usefullscreen
Description: React fullscreen hook
Author: Jake Thornton
Latest version: 1.0.1

# @jdthornton/usefullscreen

[![npm (scoped)](https://img.shields.io/npm/v/@jdthornton/usefullscreen.svg)](https://www.npmjs.com/package/@jdthornton/usefullscreen)
[![npm bundle size (minified)](https://img.shields.io/bundlephobia/min/@jdthornton/usefullscreen.svg)](https://www.npmjs.com/package/@jdthornton/usefullscreen)

React fullscreen hook.

## Install

```
$ npm install @jdthornton/usefullscreen
```

## Usage

```js
import useFullscreen from "@jdthornton/usefullscreen";

function App (){

  const [ isFullscreen, toggleFullscreen ] = useFullscreen();

  return(
    <button type="button" onClick={toggleFullscreen}>
      Fullscreen
    </button>
  )
}
```
npm package: @jdthornton/useinterval
Description: React interval hook
Author: Jake Thornton
Latest version: 1.0.3

# @jdthornton/useinterval

[![npm (scoped)](https://img.shields.io/npm/v/@jdthornton/useinterval.svg)](https://www.npmjs.com/package/@jdthornton/useinterval)
[![npm bundle size (minified)](https://img.shields.io/bundlephobia/min/@jdthornton/useinterval.svg)](https://www.npmjs.com/package/@jdthornton/useinterval)

React interval hook.

## Install

```
$ npm install @jdthornton/useinterval
```

## Usage

```js
import { useState } from 'react';
import useInterval from "@jdthornton/useinterval";

function App(){
  const [ isCountActive, setIsCountActive ] = useState();
  const [ count, setCount ] = useState(0);
  const handleCountToggle = () => setIsCountActive(prevIsCountActive => !prevIsCountActive)
  useInterval(
    () => setCount(prevCount => prevCount + 1),
    isCountActive ? 1000 : null
  )
  return(
    <div>
      <div>Count: {count}</div>
      <button type="button" onClick={handleCountToggle}>
        {isCountActive ? "Stop" : "Start"}
      </button>
    </div>
  )
}
```
npm package: @jdthornton/usekeypress
Description: React keypress hook
Author: Jake Thornton
Latest version: 1.1.6

# @jdthornton/usekeypress

[![npm (scoped)](https://img.shields.io/npm/v/@jdthornton/usekeypress.svg)](https://www.npmjs.com/package/@jdthornton/usekeypress)
[![npm bundle size (minified)](https://img.shields.io/bundlephobia/min/@jdthornton/usekeypress.svg)](https://www.npmjs.com/package/@jdthornton/usekeypress)

React keypress hook.

## Install

```
$ npm install @jdthornton/usekeypress
```

## Usage

```js
import useKeyPress from "@jdthornton/usekeypress";

function App({ isListening, handleClose }){

  // Listens for an 'ESC' key press event if isListening is true
  useKeyPress(isListening ? handleClose : null, 27)

  return null
}
```
npm package: @jdthornton/uselockbodyscroll
Description: React hook to lock body scroll
Author: Jake Thornton
Latest version: 1.0.2

# @jdthornton/uselockbodyscroll

[![npm (scoped)](https://img.shields.io/npm/v/@jdthornton/uselockbodyscroll.svg)](https://www.npmjs.com/package/@jdthornton/uselockbodyscroll)
[![npm bundle size (minified)](https://img.shields.io/bundlephobia/min/@jdthornton/uselockbodyscroll.svg)](https://www.npmjs.com/package/@jdthornton/uselockbodyscroll)

React hook to lock body scroll.

## Install

```
$ npm install @jdthornton/uselockbodyscroll
```

## Usage

```js
import useLockBodyScroll from "@jdthornton/uselockbodyscroll";

function App(){

  // body overflow style will be hidden
  useLockBodyScroll()

  return null
}
```
npm package: @jdthornton/useonclickoutside
Description: React on click outside ref target hook
Author: Jake Thornton
Latest version: 1.1.3

# @jdthornton/useonclickoutside

[![npm (scoped)](https://img.shields.io/npm/v/@jdthornton/useonclickoutside.svg)](https://www.npmjs.com/package/@jdthornton/useonclickoutside)
[![npm bundle size (minified)](https://img.shields.io/bundlephobia/min/@jdthornton/useonclickoutside.svg)](https://www.npmjs.com/package/@jdthornton/useonclickoutside)

React on click outside ref target hook.

## Install

```
$ npm install @jdthornton/useonclickoutside
```

## Usage

```js
import useOnClickOutside from "@jdthornton/useonclickoutside";

function App({ handleClickOutside }){
  const ref = useRef();

  useOnClickOutside(ref, handleClickOutside)

  return(
    <div ref={ref}>
      Don't click outside!
    </div>
  )
}
```
npm package: @jdthornton/usetimeout
Description: React timeout hook
Author: Jake Thornton
Latest version: 1.0.4

# @jdthornton/usetimeout

[![npm (scoped)](https://img.shields.io/npm/v/@jdthornton/usetimeout.svg)](https://www.npmjs.com/package/@jdthornton/usetimeout)
[![npm bundle size (minified)](https://img.shields.io/bundlephobia/min/@jdthornton/usetimeout.svg)](https://www.npmjs.com/package/@jdthornton/usetimeout)

React timeout hook.

## Install

```
$ npm install @jdthornton/usetimeout
```

## Usage

```js
import useTimout from "@jdthornton/usetimeout";

function App({ isSet, handleTimeoutEnd }){

  // 'handleTimeoutEnd' will be called at the end of 1000s if isSet is true
  useTimout(handleTimeoutEnd, isSet ? 1000 : null)

  return null
}
```
npm package: @jduarter/enhanced-promise
Description: Enhanced promises for better code readability
Author: Jorge Duarte Rodríguez
Latest version: 0.0.8

## Enhanced promise
[![NPM](https://img.shields.io/npm/v/@jduarter/enhanced-promise)](https://github.com/jduarter/enhanced-promise)
[![type-coverage](https://img.shields.io/badge/dynamic/json.svg?label=type-coverage&prefix=%E2%89%A5&suffix=%&query=$.typeCoverage.atLeast&uri=https%3A%2F%2Fraw.githubusercontent.com%2Fjduarter%2Fenhanced-promise%2Fmaster%2Fpackage.json)](https://github.com/jduarter/enhanced-promise)
npm package: @jduarter/expo-cli
Description: The command-line tool for creating and publishing Expo apps
Latest version: 4.6.0-alpha.0-jduarter.0

# Expo CLI

If you have problems with the code in this repository, please file issues & bug reports
at https://github.com/expo/expo-cli. Thanks!

## Installation

[Installation instructions and documentation here.](https://docs.expo.io/workflow/expo-cli/#installation)

## Getting Started

To make a new project use `expo init [path]`. The path is optional and it will use the current directory if not specified (all commands that need a path behave similarly).

## Viewing a Project on Your Phone

To view a project you must have an Expo CLI server running for that project. Run `expo start [path]` to start running the server. Once it is ready it'll output a URL for your project.

The server will continue running until you close it.

To view this on your phone, do the following:

- Go get the Expo app on your Android or iOS device. It's available [on the Google Play Store](https://play.google.com/store/apps/details?id=host.exp.exponent) and [on the iOS App Store](https://itunes.com/apps/exponent).

- Run `expo send` to send a link via email. You can also use the `--send-to` option when running `expo start`.

- Check your e-mail and tap the link. The Expo app should open and you should be able to view your experience there!

## Publishing a Project

To publish something you've made, just follow these steps:

- Create an Expo account or login to an existing one by running `expo login`.
- Run an Expo CLI server using `expo start`.
- Check to make sure you can load your app by opening it in the Expo app.
- Once everything looks good, run `expo publish`. A few seconds later, you should get a clean URL sent to you that points to the exp.host server where your package was published to.

You can publish as many times as you want and it will replace your old version, so don't worry about making a mistake!
npm package: @jduarter/sysexec
Description: Safe process execution and handling
Author: Jorge Duarte Rodríguez
Latest version: 0.0.4

## Sysexec
[![NPM](https://img.shields.io/npm/v/@jduarter/sysexec)](https://github.com/jduarter/sysexec)
[![type-coverage](https://img.shields.io/badge/dynamic/json.svg?label=type-coverage&prefix=%E2%89%A5&suffix=%&query=$.typeCoverage.atLeast&uri=https%3A%2F%2Fraw.githubusercontent.com%2Fjduarter%2Fsysexec%2Fmaster%2Fpackage.json)](https://github.com/jduarter/sysexec)