https://github.com/brodycj/react-primitives-input

https://github.com/brodycj/react-primitives-input

Last synced: about 1 month ago
JSON representation

• Host: GitHub
• URL: https://github.com/brodycj/react-primitives-input
• Owner: brodycj
• License: mit
• Created: 2019-04-11T16:55:36.000Z (over 5 years ago)
• Default Branch: dev
• Last Pushed: 2020-04-02T19:48:14.000Z (almost 5 years ago)
• Last Synced: 2024-08-14T08:21:47.461Z (5 months ago)
• Language: JavaScript
• Size: 11.7 KB
• Stars: 1
• Watchers: 3
• Forks: 0
• Open Issues: 6
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# react-primitives-input

**LICENSE:** [MIT](./LICENSE)

`Input` component for [`react-primitives`](https://www.npmjs.com/package/react-primitives) to provide input types, starting with text input

for [`react-native`](https://www.npmjs.com/package/react-native) and [`react-native-web`](https://www.npmjs.com/package/react-native-web),

in a similar fashion to the [HTML input element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input).

(`Input` component for text would be similar to the [HTML text input element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/text).)

This component may support other input types such as button, checkbox, or even voice input someday in the future.

This component supports Android, iOS, and web for now, may support other platforms in case of sufficient interest

in the future.

## Usage

### Prerequisites

- [`react-native`](https://www.npmjs.com/package/react-native) present in case of a React Native app

- [`react-native-web`](https://www.npmjs.com/package/react-native-web) present in case of a [`react-native-web`](https://www.npmjs.com/package/react-native-web) app

**Recommended:**

- [`react-primitives`](https://www.npmjs.com/package/react-primitives) - a set of popular primitive components supported across

[`react-native-web`](https://www.npmjs.com/package/react-native-web) and [`react-native`](https://www.npmjs.com/package/react-native)

### Text input

```jsx

// ...

import Input from 'react-primitives-input'

  // ...

  // in render function:

  

     this.setState({ textLength:text.length })}

    />

    First input length: { this.state.textLength }

  

```

In this case, `Input` would be a `TextInput` component that uses all given properties except for `type`.

## Rationale

The idea is that it should be possible to have a single `Input` component that does not have to work the same

way on all types of platforms and devices. This would enable higher-level libraries such as

[Emotion js](https://github.com/emotion-js/emotion), [Styled Components](https://www.styled-components.com/),

[Styled System](https://github.com/styled-system/styled-system), etc. to support generic primitive `Input`

components that could be supported across a wide variety of platforms and devices.

## LICENSE

[MIT LICENSE](./LICENSE)