https://github.com/michal-wrzosek/xfor-text-field
XFor Text Field React Component
https://github.com/michal-wrzosek/xfor-text-field
Last synced: 9 months ago
JSON representation
XFor Text Field React Component
- Host: GitHub
- URL: https://github.com/michal-wrzosek/xfor-text-field
- Owner: michal-wrzosek
- Created: 2019-02-26T18:47:06.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2022-02-11T16:32:56.000Z (almost 4 years ago)
- Last Synced: 2025-02-22T00:47:21.198Z (10 months ago)
- Language: TypeScript
- Size: 1.62 MB
- Stars: 1
- Watchers: 3
- Forks: 0
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# xfor-text-field
**XForTextField React Component**
[](https://www.npmjs.com/package/xfor-text-field)
[Demo app with implemented component](https://michal-wrzosek.github.io/xfor-text-field/)
## Install
```bash
npm install --save xfor-text-field
```
Peer dependencies:
- react: ^16.8.6"
- react-dom: ^16.8.6"
- styled-components: ^4.3.2
## Usage
XFor TextField component is designed for projects using styled-components.
Styles of this component expect `box-sizing: border-box;` set globally for all nodes and base font size set to 10px:
```css
html {
font-size: 10px;
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
body {
font-size: 100%;
}
```
You can style this component by specifing some props in your theme (props shown here are the default ones):
```js
const theme = {
// ...your other theme definitions
xfor: {
// namespace for XFor components
textField: {
// styles for TextField component
height: 40, // in pixels
fontColor: '#000000',
borderColor: '#d8d8d8',
borderErroredColor: 'red',
bgColor: '#FFFFFF',
bgDisabledColor: '#ececec',
bgErroredColor: '#ffd9d9',
fontDisabledColor: '#9a9a9a',
labelColor: '#9c9c9c',
},
},
};
```
XFor TextField component `dumb` as much as possible, though, you need to wrap it in a class to manage its state. Check the example app [here](example/src/TextFieldContainer.jsx).
List of props you can pass to the component:
```ts
type TextFieldProps = {
/*
* Value of the input
*/
value: string;
/*
* Is input focused
*/
isFocused: boolean;
/*
* Error messages to be shown (isTouch has to be set to true to display errors)
*/
errorMessage: string;
/*
* Did input was touched by user (useful for displaying error messages). You don't want to show errors to the field that was not yet touched by user.
*/
isTouched: boolean;
/*
* Field label
*/
label: string;
/*
* Name of the input
*/
name: string;
/*
* Type of the imput: [text, password, email]
*/
type: TextFieldType;
/*
* Is input disabled
*/
disabled: boolean;
/*
* Callback func that will be called on input change
*/
onChange: (event: React.ChangeEvent) => void;
/*
* Callback func that will be called on input focus
*/
onFocus: (event: React.FocusEvent) => void;
/*
* Callback func that will be called on input blur
*/
onBlur: (event: React.FocusEvent) => void;
};
```
## License
MIT © [Michał Wrzosek](https://github.com/michal-wrzosek)
michal@wrzosek.pl
https://michal.wrzosek.pl
---
This package was bootstrapped with [react-component-lib](https://github.com/michal-wrzosek/react-component-lib)