open-index/open-npm huggingface dataset:
npm package: @flying-dice/commons
Description: Commons Library for Flying Dice
Latest version: 0.1.1

# Flying Dice - Commons

Commons Library for Flying Dice

## Installation
```bash
yarn add @flying-dice/commons
```

## Usage
See [API.md](docs/API.md) for usage information

## Additional Exposed Libraries
- https://www.npmjs.com/package/@turf/turf/v/6.2.0


## License
[MIT](https://choosealicense.com/licenses/mit/)
npm package: @flying-dice/fluentui-toolkit
Description: Fluent UI Extensions Toolkit
Author: Jonathan Turnock
Latest version: 0.1.15

# Flying Dice - FluentUI Toolkit

Additional Components and helpers to extend FluentUI

## Installation

```shell
yarn add @flying-dice/fluentui-toolkit
```

## Development

To Develop the Project in tandem with another use the yarn link feature.

Run `yarn link` within this project, then run `yarn link "@flying-dice/fluentui-toolkit"` 
within the dependant project to use the local build rather than NPM.

ℹ Issues can occour with React Versions such as `Error: Invalid hook call` 
To resolve this Link `react` and `react-dom` also.

```shell
// This Project
cd node_modules/react
yarn link
cd ../../node_modules/react-dom
yarn link

// Dependant Project
yarn link react
yarn link react-dom
```

## Usage

See the Storybook for component Documentation

https://flying-dice.github.io/fluentui-toolkit/

## License

[MIT](https://choosealicense.com/licenses/mit/)
npm package: @flying-dice/mapbox-toolkit
Description: Mapbox Toolkit wrapping mapbox-gl and @mapbox/mapbox-gl-draw
Latest version: 1.4.0

# @flying-dice/mapbox-toolkit

Wrapper wround Mapbox-gl and @mapbox/mapbox-gl-draw

## Installation

`npm i @flying-dice/mapbox-toolkit`

## Usage

> TBC
npm package: @flying-dice/world-map-kit-react
Description: React Components for Rendering the World Map Kit
Latest version: 0.0.14

# Flying Dice - World Map Kit React

React Components for Rendering the World Map Kit

## Installation
```bash
yarn add @flying-dice/world-map-kit-react
```

## Setup

Add Associated CSS Classes to ensure mapbox is displayed correctly:
```scss
// index.scss
@import "~mapbox-gl/dist/mapbox-gl.css";
@import "~@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css";
@import "~@mapbox/mapbox-gl-geocoder/dist/mapbox-gl-geocoder.css";
```

Additionally, In a Production Bundle include the Mapbox JS script, i.e. here is an example of
including the JS from a CDN.

```html
<head>
  <!-- Before -->
  <script src='https://api.mapbox.com/mapbox-gl-js/v2.0.0/mapbox-gl.js'></script>
  <!-- After -->
</head>
```

_This is a Workaround for the following issue:
https://github.com/mapbox/mapbox-gl-js/issues/4359_

## Usage

Add a Context Provider in your Application

```typescript jsx
export const App: React.FC = () => {
  return (
    <WorldMapContextProvider>
      ...
    </WorldMapContextProvider>
  )
}
```

Inside your chosen child container create a WorldMap component
```typescript jsx
import { WorldMap } from "@flying-dice/world-map-kit-react";

export const MapContainer: React.FC = () => {
  return (
    <WorldMap accessToken="..." enableGeocoder={true} elevation={true} />
  )
}
```

The `WorldMap` component will instantiate the `WorldMap` instance and set it via the 
`useWorldMapContext` hook.

In Other Application Items throughout the tree you can now use the hook to access the 
WorldMapKit instance from the provider

For example this Status Bar component is using the `onMouseMovement` Observable from the `WorldMapKit`:
```typescript jsx
export const StatusBarContainer: React.FC = () => {
  const { worldMapKit } = useWorldMapContext<WorldMap>()
  const [cursorLocation, setCursorLocation] = useState<LatLong>({
    lat: 0,
    lng: 0,
  })

  useEffect(() => {
    worldMapKit?.onMouseMovement.subscribe((e) => setCursorLocation(e.lngLat))
  }, [worldMapKit])

  return (
    <>
      <StatusBar cursorLocation={cursorLocation} />
    </>
  )
}
```

To instantiate a Drawable world map simply use the `DrawableWorldMap` component rather than the 
`WorldMap` component and replace the generic type in the Hook from `WorldMapKit` to 
`DrawableWorldMapKit`

## License
[MIT](https://choosealicense.com/licenses/mit/)
npm package: @flying-studio/use-pagination
Description: 分页请求库
Author: FlyingStudio
Latest version: 1.1.1

# usePagination

```javascript
import usePagination from "@flying-studio/use-pagination";
const { data, loading, error, run, refresh, fetchData } = usePagination(
  (currPage) => request(currPage)
);
```

## start with yarn

```shell
npm i @flying-studio/use-pagination
yarn add @flying-studio/use-pagination
pnpm add @flying-studio/use-pagination
```