https://github.com/kherrick/x-react-clock
A custom element wrapper for react-clock.
https://github.com/kherrick/x-react-clock
clock custom-elements react time web-components
Last synced: about 2 months ago
JSON representation
A custom element wrapper for react-clock.
- Host: GitHub
- URL: https://github.com/kherrick/x-react-clock
- Owner: kherrick
- Created: 2019-03-18T00:01:23.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2023-01-03T18:00:21.000Z (over 3 years ago)
- Last Synced: 2025-04-12T02:14:29.905Z (about 1 year ago)
- Topics: clock, custom-elements, react, time, web-components
- Language: CSS
- Homepage: https://j.mp/2Hsutor
- Size: 438 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# x-react-clock
**A custom element wrapper for react-clock.**
## Demo an unpkg installation
Everything defined in one file, without a build step @ [https://j.mp/2Hsutor](https://j.mp/2Hsutor).
## Usage with NPM
### Install
```bash
npm i x-react-clock
```
### Import
```javascript
import * as XReactClock from 'x-react-clock'
```
### Define
```javascript
window.customElements.define('x-react-clock', XReactClock.default)
```
### Declare
```html
```
### Style
Styles are extracted from [react-clock](https://www.npmjs.com/package/react-clock) and placed in [separate css files](https://github.com/kherrick/x-react-clock/blob/master/lib/es/x-react-clock.css). Apply them, or the clock will be blank when first viewed. See [the demo](https://j.mp/2Hsutor) for an example.