{"id":15828832,"url":"https://github.com/nachovigilante/react-7-segment-display","last_synced_at":"2025-08-18T03:36:32.181Z","repository":{"id":50450061,"uuid":"515493755","full_name":"nachovigilante/react-7-segment-display","owner":"nachovigilante","description":"A React component that simulates a 7-segment display.","archived":false,"fork":false,"pushed_at":"2025-04-04T23:51:41.000Z","size":1378,"stargazers_count":16,"open_issues_count":0,"forks_count":10,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-16T01:12:25.845Z","etag":null,"topics":["7-segment","7-segment-display","7-segment-display-module","react","react-7-segment-display","reactjs"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/react-7-segment-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/nachovigilante.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":"2022-07-19T08:11:25.000Z","updated_at":"2025-04-09T10:22:01.000Z","dependencies_parsed_at":"2025-03-29T09:44:49.636Z","dependency_job_id":null,"html_url":"https://github.com/nachovigilante/react-7-segment-display","commit_stats":{"total_commits":38,"total_committers":2,"mean_commits":19.0,"dds":"0.21052631578947367","last_synced_commit":"2bfe1ae1da581e286cfa2e262a595a4bc8195630"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nachovigilante%2Freact-7-segment-display","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nachovigilante%2Freact-7-segment-display/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nachovigilante%2Freact-7-segment-display/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nachovigilante%2Freact-7-segment-display/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nachovigilante","download_url":"https://codeload.github.com/nachovigilante/react-7-segment-display/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249178217,"owners_count":21225350,"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":["7-segment","7-segment-display","7-segment-display-module","react","react-7-segment-display","reactjs"],"created_at":"2024-10-05T10:42:46.118Z","updated_at":"2025-04-16T01:12:31.101Z","avatar_url":"https://github.com/nachovigilante.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React 7-Segment Display\n\nA React component that simulates a 7-segment display.\n\n![Display demo](./assets/Display.gif)\n\n## Usage\n\n### Installation\n\n`npm install react-7-segment-display`\n\n### Adding the component to your project\n\n```jsx\nimport { Display } from \"react-7-segment-display\";\n\nconst App = () =\u003e \u003cDisplay value=\"77\" /\u003e;\n\nexport default App;\n```\n\n## Props\n\n| Name           | Decription                                                 | Type      | Default value |\n| -------------- | ---------------------------------------------------------- | --------- | ------------- |\n| value          | Value displayed on the display (in decimal or hexadecimal) | `any`     | `null`        |\n| color          | Color of the display segments when turned on               | `string`  | `\"red\"`       |\n| height         | Total height of the display digits                         | `number`  | `250`         |\n| count          | Amount of digits on the display                            | `number`  | `2`           |\n| bakgroundColor | Color of the background                                    | `string?` | n/a           |\n| skew           | Whether the digits are skewed or not                       | `boolean` | `false`       |\n\n### Valid values for `value`\n\nYou can dislay a number in decimal or hexadecimal, giving its value by a number or a string.\n\n![Display demo](./assets/Display_hex.gif)\n\n### Skew prop\n\n`skew` is a boolean that determines whether the digits are skewed or not. You can use it to make the display look more like a real 7-segment display.\n\n![Display demo](./assets/Display_skew.gif)\n\n## License\n\nMIT License\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnachovigilante%2Freact-7-segment-display","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnachovigilante%2Freact-7-segment-display","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnachovigilante%2Freact-7-segment-display/lists"}