{"id":13422072,"url":"https://github.com/antonfisher/react-simple-timefield","last_synced_at":"2025-04-05T23:08:23.314Z","repository":{"id":39525764,"uuid":"101533924","full_name":"antonfisher/react-simple-timefield","owner":"antonfisher","description":"Simple React time input field","archived":false,"fork":false,"pushed_at":"2023-01-26T06:30:44.000Z","size":1754,"stargazers_count":96,"open_issues_count":17,"forks_count":47,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-03-29T21:08:58.318Z","etag":null,"topics":["react","timefield","timeinput"],"latest_commit_sha":null,"homepage":"https://antonfisher.com/react-simple-timefield/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/antonfisher.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-08-27T06:20:08.000Z","updated_at":"2025-02-08T12:07:07.000Z","dependencies_parsed_at":"2023-02-14T14:46:30.157Z","dependency_job_id":null,"html_url":"https://github.com/antonfisher/react-simple-timefield","commit_stats":null,"previous_names":[],"tags_count":17,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/antonfisher%2Freact-simple-timefield","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/antonfisher%2Freact-simple-timefield/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/antonfisher%2Freact-simple-timefield/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/antonfisher%2Freact-simple-timefield/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/antonfisher","download_url":"https://codeload.github.com/antonfisher/react-simple-timefield/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247411234,"owners_count":20934653,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["react","timefield","timeinput"],"created_at":"2024-07-30T23:00:36.536Z","updated_at":"2025-04-05T23:08:23.280Z","avatar_url":"https://github.com/antonfisher.png","language":"TypeScript","funding_links":[],"categories":["UI Components","\u003csummary\u003eUI Components\u003c/summary\u003e"],"sub_categories":["Form Components"],"readme":"# react-simple-timefield\n\nSimple React time input field, check out [demo](https://antonfisher.com/react-simple-timefield/).\n\n[![Build Status](https://travis-ci.org/antonfisher/react-simple-timefield.svg?branch=master)](https://travis-ci.org/antonfisher/react-simple-timefield)\n[![Coverage Status](https://coveralls.io/repos/github/antonfisher/react-simple-timefield/badge.svg?branch=master)](https://coveralls.io/github/antonfisher/react-simple-timefield?branch=master)\n[![npm](https://img.shields.io/npm/dt/react-simple-timefield.svg?colorB=brightgreen)](https://www.npmjs.com/package/react-simple-timefield)\n[![npm](https://img.shields.io/npm/v/react-simple-timefield.svg?colorB=brightgreen)](https://www.npmjs.com/package/react-simple-timefield)\n[![GitHub license](https://img.shields.io/github/license/antonfisher/react-simple-timefield.svg)](https://github.com/antonfisher/react-simple-timefield/blob/master/LICENSE)\n\n[![Demo](docs/demo.gif)](https://antonfisher.com/react-simple-timefield/)\n\n## Installation\n```bash\nnpm install --save react-simple-timefield\n\n#for React \u003c16 use: npm install --save react-simple-timefield@1\n```\n\n## Usage\n```jsx\nimport TimeField from 'react-simple-timefield';\n...\n\u003cTimeField\n    value={time}                       // {String}   required, format '00:00' or '00:00:00'\n    onChange={(event, value) =\u003e {...}} // {Function} required\n    input={\u003cMyCustomInputElement /\u003e}   // {Element}  default: \u003cinput type=\"text\" /\u003e\n    inputRef={(ref) =\u003e {...}}          // {Function} input's ref\n    colon=\":\"                          // {String}   default: \":\"\n    showSeconds                        // {Boolean}  default: false\n/\u003e\n```\n\n## Real world example\n```jsx\nimport TimeField from 'react-simple-timefield';\n\nclass App extends React.Component {\n  constructor(...args) {\n    super(...args);\n\n    this.state = {\n      time: '12:34'\n    };\n\n    this.onTimeChange = this.onTimeChange.bind(this);\n  }\n\n  onTimeChange(event, time) {\n    this.setState({time});\n  }\n\n  render() {\n    const {time} = this.state;\n\n    return (\n      \u003cTimeField value={time} onChange={this.onTimeChange} /\u003e\n    );\n  }\n}\n```\n\n## Migrate version 2.x to version 3.x\n\nThere is a breaking change in version 3.\nThe `onChange` callback property will be called with two arguments.\n\n```jsx\n// Before:\n\u003cTimeField onChange={(value) =\u003e console.log(value)} /\u003e\n\n// After:\n\u003cTimeField onChange={(event, value) =\u003e console.log(event, value)} /\u003e\n```\n\n## Contributing\n\n#### Run demo:\nFor running demo locally, replace:\n```javascript\nimport TimeField from '../';\n// to\nimport TimeField from '../src';\n```\nin `demo/index.tsx` file.\n\n```bash\n# run development mode\ncd demo\nnpm install\nnpm install --only=dev\nnpm run dev\n```\n\n#### Build:\n```bash\nnpm install\nnpm install --only=dev\nnpm test\nnpm run format\nnpm run build\n```\n\n## License\nMIT License. Free use and change.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fantonfisher%2Freact-simple-timefield","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fantonfisher%2Freact-simple-timefield","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fantonfisher%2Freact-simple-timefield/lists"}