open-index/open-npm huggingface dataset:
npm package: @rdub/next-leaflet
Description: Leaflet.js (map) utils for Next.js
Latest version: 0.2.1

# @rdub/next-leaflet
[Leaflet] utils for [Next.js]

<a href="https://npmjs.org/package/@rdub/next-leaflet" title="@rdub/next-leaflet on NPM"><img src="https://img.shields.io/npm/v/@rdub/next-leaflet.svg" alt="@rdub/next-leaflet NPM version" /></a>

## Install
```bash
npm install @rdub/next-leaflet
```

You'll also want to this CSS (required by [src/map/settings.tsx](src/map/settings.tsx)) to your `_app.tsx`:
```typescript
import '@fortawesome/fontawesome-svg-core/styles.css'
```

Note also how [src/map/settings.tsx](src/map/settings.tsx#L6-L7) disables automatic fontawesome CSS injection:
```typescript
import { config, IconProp } from '@fortawesome/fontawesome-svg-core'
config.autoAddCss = false
```

Used in:
- [ctbk.dev](https://ctbk.dev)
- [crashes.hudcostreets.org](https://crashes.hudcostreets.org)

[Leaflet]: https://leafletjs.com/
[Next.js]: https://nextjs.org/
npm package: @rdub/next-markdown
Description: Markdown utilities for Next.js
Latest version: 0.4.0

# @rdub/next-markdown
Markdown utilities for [Next.js]

<a href="https://npmjs.org/package/@rdub/next-markdown" title="View @rdub/next-markdown on NPM"><img src="https://img.shields.io/npm/v/@rdub/next-markdown.svg" alt="@rdub/next-markdown NPM version" /></a>

```jsx
import Markdown, { MD } from '@rdub/next-markdown/md'

export default function Page() {
    return <div>
        <Markdown className={"foo"} content={`
            # Hello, world!
            Here is some [GitHub-flavored Markdown][GFMD],
            rendered with the \`Markdown\` component.

            ## Margins are stripped, by default
            Normally, 4 leading spaces denote a code block
            (similar to a triple-backtick line).

            [GFMD]: https://github.github.com/gfm/
        `}/>
        {MD(`
            ### \`MD\` function
            You can also pass a string directly to \`MD\`:

                MD("## Markdown!")
        `)}
    </div>
}
```

## Example usage
- [ctbk.dev](https://github.com/neighbor-ryan/ctbk.dev/blob/c2ccbcd4e2f64be3e2a6919b1c50ee6cbd8f9a5e/www/pages/index.tsx#L660-L667)

[Next.js]: https://nextjs.org/
npm package: @rdub/next-params
Description: Persist Next.js app state in URL parameters
Latest version: 0.3.0

# @rdub/next-params
Persist [Next.js] app state in URL parameters

<a href="https://npmjs.org/package/@rdub/next-params" title="View @rdub/next-params on NPM"><img src="https://img.shields.io/npm/v/@rdub/next-params.svg" alt="@rdub/next-params NPM version" /></a>

[Next.js]: https://nextjs.org/
npm package: @rdub/next-plotly
Description: Plotly utils for Next.js
Latest version: 0.3.0

# @rdub/next-plotly
[Plotly] utils for [Next.js]

<a href="https://npmjs.org/package/@rdub/next-plotly" title="View @rdub/next-plotly on NPM"><img src="https://img.shields.io/npm/v/@rdub/next-plotly.svg" alt="@rdub/next-plotly NPM version" /></a>

- [plot-wrapper.tsx](src/plot-wrapper.tsx): wrap a react-plotly.js Plot, add support for: 
  - A "fallback" image (rendered while `react-plotly.js` is being dynamically loaded)
  - Legend-trace mouseover events
  - Rounding x-axis range in response to user zoom events (e.g. to avoid partial visibility of bars at x-axis ticks)
  - Downloading a plot image (e.g. as PNG)
- [plot.tsx](src/plot.tsx) - wraps `PlotWrapper`, adds default title/subtitle/filtering configs. 

Used in:
- [ctbk.dev]
- [crashes.hudcostreets.org]

[Plotly]: https://plotly.com/
[Next.js]: https://nextjs.org/

[ctbk.dev]: https://ctbk.dev/
[crashes.hudcostreets.org]: https://crashes.hudcostreets.org/