open-index/open-npm huggingface dataset:
npm package: @jamiedixon/ink-text-input
Description: Text input component for Ink
Author: Vadim Demedes
Latest version: 3.0.2

# ink-text-input [![Build Status](https://travis-ci.org/vadimdemedes/ink-text-input.svg?branch=master)](https://travis-ci.org/vadimdemedes/ink-text-input)

> Text input component for [Ink](https://github.com/vadimdemedes/ink).


## Install

```
$ npm install ink-text-input
```


## Usage

```jsx
import React from 'react';
import {render} from 'ink';
import TextInput from 'ink-text-input';

class SearchQuery extends React.Component {
	constructor() {
		super();

		this.state = {
			query: ''
		};

		this.handleChange = this.handleChange.bind(this);
		this.handleSubmit = this.handleSubmit.bind(this);
	}

	render() {
		return (
			<Box>
				<Box marginRight={1}>
					Enter your query:
				</Box>

				<TextInput
					value={this.state.query}
					onChange={this.handleChange}
				/>
			</Box>
		);
	}

	handleChange(query) {
		this.setState({query});
	}
}

render(<SearchQuery/>);
```

<img src="media/demo.gif" width="556">


## Props

### value

Type: `string`

Value to display in a text input.

### placeholder

Type: `string`

Text to display when `value` is empty.

### showCursor

Type: `boolean`<br>
Default: `false`

Whether to show cursor and allow navigation inside text input with arrow keys.

### mask

Type: `string`

Replace all chars and mask the value. Useful for password inputs.

```jsx
<TextInput
	value="Hello"
	mask="*"
/>
//=> "*****"
```

### onChange

Type: `Function`

Function to call when value updates.


## License

MIT © [Vadim Demedes](https://github.com/vadimdemedes)
npm package: @jamiedixon/materialui-daterange-picker
Description: A react date range picker implementation using @material-ui.
Author: pedro-lb
Latest version: 1.1.92

# Material UI DateRange Picker

A react date range picker implementation using @material-ui.

<a href='https://www.npmjs.com/package/materialui-daterange-picker'>
    <img src='https://img.shields.io/npm/v/materialui-daterange-picker.svg' alt='Latest npm version'>
</a>

## Preview

![Screenshot](/screenshot.png?raw=true "Screenshot")

## Live Demo

Check out the project running [here](https://codesandbox.io/s/materialui-daterange-picker-2p3f1?file=/src/App.js)!

## Usage

```bash
npm install materialui-daterange-picker --save

# or with yarn
yarn add materialui-daterange-picker
```

## Basic example
```tsx
import React from "react";
import { DateRangePicker, DateRange } from "materialui-daterange-picker";

type Props = {}

const App: React.FunctionComponent<Props> = props => {
  const [open, setOpen] = React.useState(false);
  const [dateRange, setDateRange] = React.useState<DateRange>({});

  const toggle = () => setOpen(!open);

  return (
    <DateRangePicker
      open={open}
      toggle={toggle}
      onChange={(range) => setDateRange(range)}
    />
  );
}

export default App;
```

## Types
```ts
interface DateRange {
    startDate?: Date,
    endDate?: Date
}

interface DefinedRange {
    label: string,
    startDate: Date,
    endDate: Date
}
```

## Props

Name | Type | Required | Default value | Description
:--- | :--- | :--- | :--- | :---
`onChange` | `(DateRange) => void` | _required_ | - | handler function for providing selected date range
`toggle` | `() => void` | _required_ | - | function to show / hide the DateRangePicker
`initialDateRange` | `DateRange` | _optional_ | `{}` | initially selected date range
`minDate` | `Date` or `string` | _optional_ | 10 years ago | min date allowed in range
`maxDate` | `Date` or `string` | _optional_ | 10 years from now | max date allowed in range
`definedRanges` | `DefinedRange[]` | _optional_ | - | custom defined ranges to show in the list
`closeOnClickOutside` | `boolean` | _optional_ | `true` | defines if DateRangePicker will be closed when clicking outside of it
`wrapperClassName` | `object` | _optional_ | `undefined` | defines additional wrapper style classes

## Made possible by

<a href="https://github.com/jungsoft/materialui-daterange-picker/graphs/contributors">
  <img src="https://contributors-img.web.app/image?repo=jungsoft/materialui-daterange-picker" />
</a>