{"id":13795099,"url":"https://github.com/robonyong/react-split-flap-display","last_synced_at":"2025-05-12T21:33:22.022Z","repository":{"id":29291918,"uuid":"121266938","full_name":"robonyong/react-split-flap-display","owner":"robonyong","description":"A CSS \u0026 React built Split Flap or Solari display","archived":false,"fork":false,"pushed_at":"2024-09-24T03:53:45.000Z","size":6226,"stargazers_count":34,"open_issues_count":5,"forks_count":12,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-10-14T02:08:06.125Z","etag":null,"topics":["react","solari","split-flap"],"latest_commit_sha":null,"homepage":"https://robonyong.github.io/react-split-flap-display/","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/robonyong.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-02-12T15:52:05.000Z","updated_at":"2024-09-29T11:05:30.000Z","dependencies_parsed_at":"2024-08-03T23:04:42.436Z","dependency_job_id":"bf68f612-521f-4b4e-80ad-7631bf6be0ea","html_url":"https://github.com/robonyong/react-split-flap-display","commit_stats":{"total_commits":55,"total_committers":2,"mean_commits":27.5,"dds":0.4181818181818182,"last_synced_commit":"84c48f94b566bd10c574ec381d5ba989288671e7"},"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/robonyong%2Freact-split-flap-display","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/robonyong%2Freact-split-flap-display/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/robonyong%2Freact-split-flap-display/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/robonyong%2Freact-split-flap-display/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/robonyong","download_url":"https://codeload.github.com/robonyong/react-split-flap-display/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224869692,"owners_count":17383422,"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","solari","split-flap"],"created_at":"2024-08-03T23:00:52.141Z","updated_at":"2024-11-18T09:31:39.276Z","avatar_url":"https://github.com/robonyong.png","language":"TypeScript","readme":"# React Split Flap Display\n\nA React component that mimics a Split-Flap/Solari display, cos I like Solari boards \u0026 wanted to practice creating NPM modules.\n\n[![NPM](https://img.shields.io/npm/v/react-split-flap-display.svg)](https://www.npmjs.com/package/react-split-flap-display)\n\n[Live Demo + Docs](http://robonyong.github.io/react-split-flap-display/)\n\n## Install\n\n```bash\nnpm install --save react-split-flap-display\n```\n\n## Usage\n\n```jsx\nimport React from 'react';\n\nimport SplitFlapDisplay from 'react-split-flap-display';\n\nexport default function Display() {\n  return \u003cSplitFlapDisplay characterSet={['1', '2', '3', '4', ':']} value=\"12:34\" /\u003e;\n}\n```\n\n### Props\n\n| Key            | Type                        | Default   | Description                                                                                                                                                                                |\n| -------------- | --------------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| background     | string                      | '#000000' | Hex or rgb() string for the display's background                                                                                                                                           |\n| borderColor    | string                      | '#dddddd' | Hex or rgb() string for the color of the border between characters                                                                                                                         |\n| borderWidth    | string                      | '1px'     | Any valid CSS width value for the width of the border between characters                                                                                                                   |\n| characterSet   | Array of strings (required) | _null_    | The array of characters for the display to flip through                                                                                                                                    |\n| characterWidth | string                      | '1em'     | Any valid CSS width value for the width of each character. Useful with non-monospaced fonts                                                                                                |\n| minLength      | number                      | 0         | Minimum # of characters in the display                                                                                                                                                     |\n| padDirection   | string                      | 'left'    | If minLength \u003e number of characters currently displayed, append blank characters to left or right side                                                                                     |\n| splitWidth     | string                      | '1px'     | Any valid CSS width value for the width of the \"axis\" between the top and bottom of a character                                                                                            |\n| step           | number                      | 200       | Sets the speed (ms) of flips                                                                                                                                                               |\n| textColor      | string                      | '#dddddd' | Hex or rgb() string for color of the display characters                                                                                                                                    |\n| value          | string (required)           | ''        | The string of characters to display or flip to                                                                                                                                             |\n| withSound      | boolean or string           | _null_    | Optionally load and play a sound with every flip.\u003cbr/\u003eSound duration must be less than or equal to `step` duration.\u003cbr/\u003e`true` loads an mp3 I recorded of a single Vestaboard bit flipping |\n\nFor `characterSet`, there are three convenience constants that ship with this component from `react-split-flap-display/constants` (you can see how they might be used in the example):\n\n`NUMERIC`: `[0-9]`\\\n`ALPHA`: whitespace `' '` + `[A-Z]`\\\n`PUNCTUATION`: the non-alphanumeric characters found in a [Vesta Board](https://www.vestaboard.com/ces/)\n\nThis component inherits the font family and font size from its parents. If you want to control those properties specifically for this display, wrap it in a container or pass a `className` with those properties defined.\n\n## License\n\nMIT © [Robin Yang](https://github.com/robonyong)\n","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frobonyong%2Freact-split-flap-display","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frobonyong%2Freact-split-flap-display","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frobonyong%2Freact-split-flap-display/lists"}