open-index/open-npm huggingface dataset:
npm package: @scottbamford/react-scrollto
Description: React component that can scroll to itself using scrollInView when its shouldScrollTo prop is true.
Author: Scott Bamford
Latest version: 1.2.1

# react-scrollto
React component that can scroll to itself using scrollInView when its shouldScrollTo prop is true.

## Installation

Install react-scrollto locally within your project folder, like so:

```shell
npm install @scottbamford/react-scrollto
```

Or with yarn:

```shell
yarn add @scottbamford/react-scrollto
```

## Basic Usage

Add <ScrollTo /> to the place you want to scroll to automatically.

When you have multiple areas you may want to scroll to under different conditions, use the shouldScrollTo prop, the page will be scrolled to the component that has shouldScrollTo set to true.

Scrolling will take place only on first render.

### Typescript
```ts
import { ScrollTo } from '@scottbamford/react-scrollto';

// Basic usage
<ScrollTo />

// Usage with children
<ScrollTo>
    <div>
       You will scroll here.
    </div>
</ScrollTo>

// Usage with a condition or a loop
{
    items.map(item => (
        <ScrollTo key={item.id} shouldScrollTo={item.id === idToScrollTo}>
            {item.name}
        </ScrollTo>
        )
}

```

### Javascript
```js
import { ScrollTo } from '@scottbamford/react-scrollto';

// Basic usage
<ScrollTo />

// Usage with children
<ScrollTo>
    <div>
       You will scroll here.
    </div>
</ScrollTo>

// Usage with a condition or a loop
{
    items.map(item => (
        <ScrollTo key={item.id} shouldScrollTo={item.id === idToScrollTo}>
            {item.name}
        </ScrollTo>
        )
}

```

## CSS and Styling

<ScrollTo> renders as a div with a CSS class of scroll-to-active when the we have scrolled to that element.  This
allows you to style its children using CSS.  For example to put a orange border around a Card found within the the active ScrollTo in order to highlight it from other cards in a loop:

``css
.scroll-to-active > .card {
    border-color: orange;
}
``

## Typescript
This package is written in typescript and comes with its own bindings.

## License

Licensed under the MIT license.
npm package: @scottbedard/heliumjs
Description: [![build status](https://img.shields.io/circleci/project/github/scottbedard/bia.svg)](https://circleci.com/gh/scottbedard/bia) [![coverage](https://img.shields.io/codecov/c/github/scottbedard/bia.svg)](https://codecov.io/gh/scottbedard/bia) [![license](
Author: Scott Bedard
Latest version: 0.0.0

[![build status](https://img.shields.io/circleci/project/github/scottbedard/bia.svg)](https://circleci.com/gh/scottbedard/bia)
[![coverage](https://img.shields.io/codecov/c/github/scottbedard/bia.svg)](https://codecov.io/gh/scottbedard/bia)
[![license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/scottbedard/bia/blob/master/LICENSE)

### What is this?

This project is an attempt to implement Vue's API at compile time, rather than run time. Frameworks like Svelte demonstrate that this is possible to do, and is likely the future of web frameworks. Hopefully, when all is said and done this will be a framework with the amazing compile time logic of Svelte, mixed with the beautiful and expressive API of Vue.

> **Warning:** This project is a work in progress, and is not ready for use by anyone.
npm package: @scottbolinger/gatsby-theme-podcaster
Description: ## Quick Start
Author: Scott Bolinger
Latest version: 1.0.3
Deprecated: this version has been deprecated

# The smallest possible Gatsby theme

## Quick Start

```sh
mkdir my-site
cd my-site
yarn init
# install gatsby-theme-minimal and it's dependencies
yarn add gatsby react react-dom gatsby-theme-minimal
```

Then add the theme to your `gatsby-config.js`. We'll use the long form
here for education purposes.

```javascript
module.exports = {
  __experimentalThemes: [
    {
      resolve: "gatsby-theme-minimal",
      options: {},
    },
  ],
}
```

That's it, you can now run your gatsby site using

```sh
yarn gatsby develop
```

Note that this site doesn't _do_ anything, so you're see a missing
resources error. Create a simple page in `src/pages/index.js` to see a
page on the root url.

```javascript
import React from "react"

export default () => <div>My Site!</div>
```

## Doing more with themes

You can use this as a place to start when developing themes. I
generally suggest using [yarn
workspaces](https://yarnpkg.com/lang/en/docs/workspaces/) like the
[gatsby-theme-examples repo
does](https://github.com/ChristopherBiscardi/gatsby-theme-examples),
but using `yarn link` or `npm link` is a viable alternative if you're
not familiar with workspaces.
npm package: @scottburch/rxjs-utils
Description: Utility functions for rx-js written in Typescript.
Latest version: 1.0.4

## RxJS utils

Utility functions for rx-js written in Typescript.

### dot('propertyName')
selects a property name from an object

```typescript
of({prop: 'foo'}).pipe(
    dot('prop'),
    tap(x => x ) // 'foo'
)
```

### switchToLatestFrom
Uses withLatestFrom and then retrieves just the second observable in the array

```typescript
of('testing').pipe(
    switchToLatestFrom(of('another')),
    tap(x => x) // another
)
```
npm package: @scottcharlesn/colo-u-r
Description: CSS utility classes for every colour.
Latest version: 0.0.5

# colo-u-r

A collection of handy CSS utility classes for every shade of [Open Color](https://github.com/yeun/open-color)'s
incredible colour scheme.

## Installation

### npm

Once you have [npm](https://www.npmjs.com), you can install `colo-u-r` using the following command:

```
$ npm install --save @scottcharlesn/colo-u-r
```

### cdn

Alternitavely, you may use the [unpkg](https://unpkg.com) CDN to load `colo-u-r`'s compiled CSS.

```
<link rel="stylesheet" href="https://unpkg.com/@scottcharlesn/colo-u-r@0.0.5/dist/css/colo-u-r.min.css">
```

## Credits

* Thanks to [yeun](https://github.com/yeun), for creating [Open Color](https://github.com/yeun/open-color).
npm package: @scotterjs/server
Description: A library for server setup
Author: Diego Henrique de Oliveira Madero
Latest version: 1.0.5

# @scotterjs/server

This is a library for create a simple web server base.

## Installation

```shel
npm i @scotterjs/server
```

## Usage

This is a simple example:

```js
const scott = require('@scotterjs/server');

const server = scott();

server.use(async (ctx, next) => {
    console.log('Executing first middleware!');
    await next();
});

server.use(async ({ response }) => {
    console.log('Executing second middleware!');
    response.end('Hi!');
});

server.listen(3000);
```

## Http context

The scotter provides a http context in middlewares with two objects:
request and response.

```js
const scott = require('@scotterjs/server');

const server = scott();

server.use(async ctx => {
    console.log('HttpContext: ', ctx)
});

server.listen(3000);
```

## Class middleware

You can make middleware with es6 classes, the scotter will call
handle method in class middlewares.

```js
const scott = require('@scotterjs/server');

const server = scott();

class IsAuthMiddleware {

    async handle ({ request, response }) {
        if (!request.headers.Authorization) {
            return response.status(401).send({message: '...'});
        }

        // ...logic
    }

}

server.use(IsAuthMiddleware);

server.listen(3000);
```
npm package: @scotthaney323/react-figma-webpack-config
Description: Webpack config for react-figma projects
Author: Ilya Lesik
Latest version: 5.0.1

# webpack-config

[![npm version](https://img.shields.io/npm/v/react-figma-webpack-config.svg)](https://www.npmjs.com/package/react-figma-webpack-config)

Webpack config for react-figma projects


## Installation

Install it with yarn:

```
yarn add react-figma-webpack-config html-webpack-inline-source-plugin html-webpack-plugin svg-inline-loader ts-loader webpack webpack-merge -D
```

Or with npm:

```
npm i react-figma-webpack-config html-webpack-inline-source-plugin html-webpack-plugin svg-inline-loader ts-loader webpack webpack-merge -D
```

## Usage

At webpack config:

```javascript
var configure = require('react-figma-webpack-config');

module.exports = configure();
```

Configuration also can be extended:
```javascript
var configure = require('react-figma-webpack-config');

module.exports = configure({
    entry: {
        ui: './src/ui.js', // The entry point for your UI code
        code: './src/code.js' // The entry point for your plugin code
    },
    ...
});
```
npm package: @scotthansonde/electronland
Description: My version of a container for Electron apps that use nodeStorage and Twitter for identity.
Author: Scott Hanson
Latest version: 0.4.43-c

## @scotthansonde/electronLand

Dave Winer's container for Electron apps that use nodeStorage for identity. 

I've disabled hardware acceleration to work around a bug in Electron 7.1.10.

### Original README

This is now a available as a <a href="https://www.npmjs.com/package/electronland">package</a> on NPM and as a GitHub <a href="https://github.com/scripting/electronland">repository</a>.

More docs forthcoming.

8/3/17 by DW

### Update 2/16/20 by DW

Export shell.buildTabs so we can change the title of a tab from above. 

### Update 1/31/20; by DW

Fixed <a href="https://www.electronjs.org/releases/stable?version=6&page=5#release-notes-for-600">breakage</a> in shellNewFileDialog, shellChooseFolderDialog, shellOpenFileDialog.

Fixed some hard-coded icons used with Font-Awesome. Upgrading to the new version caused breakage. 

### Update 12/27/17 by DW

Made public along with the <a href="https://github.com/scripting/Scripting-News/issues/55">release</a> of <a href="https://github.com/scripting/electricPork">electricPork</a> as open source. The goal is to port electronLand to platforms other than the Mac.