{"id":41179565,"url":"https://github.com/jkomyno/react-matrix-text","last_synced_at":"2026-01-22T20:03:44.030Z","repository":{"id":57334401,"uuid":"108462492","full_name":"jkomyno/react-matrix-text","owner":"jkomyno","description":"ReactJS component that splits and renders a text in a given number of columns","archived":false,"fork":false,"pushed_at":"2020-07-21T12:43:04.000Z","size":434,"stargazers_count":1,"open_issues_count":7,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-09-18T08:17:06.889Z","etag":null,"topics":["react","react-component-library","render","render-pattern","render-prop","ui"],"latest_commit_sha":null,"homepage":"","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/jkomyno.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}},"created_at":"2017-10-26T20:32:07.000Z","updated_at":"2018-09-29T08:51:06.000Z","dependencies_parsed_at":"2022-08-31T16:44:06.762Z","dependency_job_id":null,"html_url":"https://github.com/jkomyno/react-matrix-text","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/jkomyno/react-matrix-text","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jkomyno%2Freact-matrix-text","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jkomyno%2Freact-matrix-text/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jkomyno%2Freact-matrix-text/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jkomyno%2Freact-matrix-text/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jkomyno","download_url":"https://codeload.github.com/jkomyno/react-matrix-text/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jkomyno%2Freact-matrix-text/sbom","scorecard":{"id":522574,"data":{"date":"2025-08-11","repo":{"name":"github.com/jkomyno/react-matrix-text","commit":"13e99977bdbb0a0b1ab360f4f027aa82e7db8e46"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":1.7,"checks":[{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Dangerous-Workflow","score":-1,"reason":"no workflows found","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Token-Permissions","score":-1,"reason":"No tokens found","details":null,"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Code-Review","score":0,"reason":"Found 0/16 approved changesets -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"Pinned-Dependencies","score":-1,"reason":"no dependencies found","details":null,"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: MIT License: LICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'master'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 2 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Vulnerabilities","score":0,"reason":"162 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92","Warn: Project is vulnerable to: GHSA-6chw-6frg-f759","Warn: Project is vulnerable to: GHSA-v88g-cgmw-v5xw","Warn: Project is vulnerable to: GHSA-whgm-jr23-g3j9","Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw","Warn: Project is vulnerable to: GHSA-fwr7-v2mv-hh25","Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7","Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw","Warn: Project is vulnerable to: GHSA-cwfw-4gq5-mrqx","Warn: Project is vulnerable to: GHSA-g95f-p29q-9xw4","Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg","Warn: Project is vulnerable to: GHSA-x9w5-v3q2-3rhw","Warn: Project is vulnerable to: GHSA-c6rq-rjc2-86v2","Warn: Project is vulnerable to: GHSA-257v-vj4p-3w2h","Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x","Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275","Warn: Project is vulnerable to: GHSA-p28h-cc7q-c4fg","Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq","Warn: Project is vulnerable to: GHSA-3wcq-x3mq-6r9p","Warn: Project is vulnerable to: GHSA-ff7x-qrg7-qggm","Warn: Project is vulnerable to: GHSA-vh7m-p724-62c2","Warn: Project is vulnerable to: GHSA-r9p9-mrjm-926w","Warn: Project is vulnerable to: GHSA-434g-2637-qmqr","Warn: Project is vulnerable to: GHSA-49q7-c7j4-3p7m","Warn: Project is vulnerable to: GHSA-977x-g7h5-7qgw","Warn: Project is vulnerable to: GHSA-f7q4-pwc6-w24p","Warn: Project is vulnerable to: GHSA-fc9h-whq2-v747","Warn: Project is vulnerable to: GHSA-vjh7-7g9h-fjfh","Warn: Project is vulnerable to: GHSA-4gmj-3p3h-gm8h","Warn: Project is vulnerable to: GHSA-6h5x-7c5m-7cr7","Warn: Project is vulnerable to: GHSA-rv95-896h-c2vc","Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx","Warn: Project is vulnerable to: GHSA-74fj-2j2h-c42q","Warn: Project is vulnerable to: GHSA-pw2r-vq6v-hr8c","Warn: Project is vulnerable to: GHSA-jchw-25xp-jwwc","Warn: Project is vulnerable to: GHSA-cxjh-pqwp-8mfp","Warn: Project is vulnerable to: GHSA-fjxv-7rqg-78g4","Warn: Project is vulnerable to: GHSA-8r6j-v8pm-fqw3","Warn: Project is vulnerable to: MAL-2023-462","Warn: Project is vulnerable to: GHSA-pfrx-2q88-qq97","Warn: Project is vulnerable to: GHSA-q42p-pg8m-cqh6","Warn: Project is vulnerable to: GHSA-w457-6q6x-cgp9","Warn: Project is vulnerable to: GHSA-62gr-4qp9-h98f","Warn: Project is vulnerable to: GHSA-f52g-6jhx-586p","Warn: Project is vulnerable to: GHSA-2cf5-4w76-r9qv","Warn: Project is vulnerable to: GHSA-3cqr-58rm-57f8","Warn: Project is vulnerable to: GHSA-g9r4-xpmj-mj65","Warn: Project is vulnerable to: GHSA-q2c6-c6pm-g3gh","Warn: Project is vulnerable to: GHSA-765h-qjxv-5f44","Warn: Project is vulnerable to: GHSA-f2jv-r9rf-7988","Warn: Project is vulnerable to: GHSA-43f8-2h32-f4cj","Warn: Project is vulnerable to: GHSA-pfq8-rq6v-vf5m","Warn: Project is vulnerable to: GHSA-6x33-pw7p-hmpq","Warn: Project is vulnerable to: GHSA-c7qv-q95q-8v27","Warn: Project is vulnerable to: GHSA-qqgx-2p2h-9c37","Warn: Project is vulnerable to: GHSA-78xj-cgh5-2h22","Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp","Warn: Project is vulnerable to: GHSA-7r28-3m3f-r2pr","Warn: Project is vulnerable to: GHSA-r8j5-h5cx-65gg","Warn: Project is vulnerable to: GHSA-2pr6-76vf-7546","Warn: Project is vulnerable to: GHSA-8j8c-7jfh-h6hx","Warn: Project is vulnerable to: GHSA-896r-f27r-55mw","Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h","Warn: Project is vulnerable to: GHSA-6c8f-qphg-qjgp","Warn: Project is vulnerable to: GHSA-76p3-8jx3-jpfq","Warn: Project is vulnerable to: GHSA-3rfm-jhwj-7488","Warn: Project is vulnerable to: GHSA-hhq3-ff78-jv3g","Warn: Project is vulnerable to: GHSA-4xc9-xhrj-v574","Warn: Project is vulnerable to: GHSA-x5rq-j2xg-h7qm","Warn: Project is vulnerable to: GHSA-jf85-cpcp-j695","Warn: Project is vulnerable to: GHSA-p6mc-m468-83gw","Warn: Project is vulnerable to: GHSA-29mw-wpgm-hmr9","Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm","Warn: Project is vulnerable to: GHSA-4xcv-9jjx-gfj3","Warn: Project is vulnerable to: GHSA-f9cm-qmx5-m98h","Warn: Project is vulnerable to: GHSA-7wpw-2hjm-89gp","Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv","Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3","Warn: Project is vulnerable to: GHSA-vh95-rmgr-6w4m","Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h","Warn: Project is vulnerable to: GHSA-fhjf-83wg-r2j9","Warn: Project is vulnerable to: GHSA-r683-j2x4-v87g","Warn: Project is vulnerable to: GHSA-92xj-mqp7-vmcj","Warn: Project is vulnerable to: GHSA-wxgw-qj99-44c2","Warn: Project is vulnerable to: GHSA-5rrq-pxf6-6jx5","Warn: Project is vulnerable to: GHSA-8fr3-hfg3-gpgp","Warn: Project is vulnerable to: GHSA-gf8q-jrpm-jvxq","Warn: Project is vulnerable to: GHSA-2r2c-g63r-vccr","Warn: Project is vulnerable to: GHSA-cfm4-qjh2-4765","Warn: Project is vulnerable to: GHSA-x4jg-mjrx-434g","Warn: Project is vulnerable to: GHSA-5fw9-fq32-wv5p","Warn: Project is vulnerable to: GHSA-rp65-9cf3-cjxr","Warn: Project is vulnerable to: GHSA-76c9-3jph-rj3q","Warn: Project is vulnerable to: GHSA-hj48-42vr-x3v9","Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j","Warn: Project is vulnerable to: GHSA-rhx6-c78j-4q9w","Warn: Project is vulnerable to: GHSA-h7cp-r72f-jxh6","Warn: Project is vulnerable to: GHSA-v62p-rq8g-8h59","Warn: Project is vulnerable to: GHSA-566m-qj78-rww5","Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j","Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp","Warn: Project is vulnerable to: GHSA-5q6m-3h65-w53x","Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6","Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw","Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg","Warn: Project is vulnerable to: GHSA-h9rv-jmmf-4pgx","Warn: Project is vulnerable to: GHSA-hxcc-f52p-wc94","Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p","Warn: Project is vulnerable to: GHSA-4g88-fppr-53pp","Warn: Project is vulnerable to: GHSA-4jqc-8m5r-9rpr","Warn: Project is vulnerable to: GHSA-g4rg-993r-mgx7","Warn: Project is vulnerable to: GHSA-c9g6-9335-x697","Warn: Project is vulnerable to: GHSA-vx3p-948g-6vhq","Warn: Project is vulnerable to: GHSA-3jfq-g458-7qm9","Warn: Project is vulnerable to: GHSA-r628-mhmh-qjhw","Warn: Project is vulnerable to: GHSA-9r2w-394v-53qc","Warn: Project is vulnerable to: GHSA-5955-9wpr-37jh","Warn: Project is vulnerable to: GHSA-qq89-hq3f-393p","Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36","Warn: Project is vulnerable to: GHSA-52f5-9888-hmc6","Warn: Project is vulnerable to: GHSA-jgrx-mgxx-jf9v","Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3","Warn: Project is vulnerable to: GHSA-7p7h-4mm5-852v","Warn: Project is vulnerable to: GHSA-662x-fhqg-9p8v","Warn: Project is vulnerable to: GHSA-394c-5j6w-4xmx","Warn: Project is vulnerable to: GHSA-78cj-fxph-m83p","Warn: Project is vulnerable to: GHSA-fhg7-m89q-25r3","Warn: Project is vulnerable to: GHSA-3329-pjwv-fjpg","Warn: Project is vulnerable to: GHSA-p6j9-7xhc-rhwp","Warn: Project is vulnerable to: GHSA-89gv-h8wf-cg8r","Warn: Project is vulnerable to: GHSA-gcv8-gh4r-25x6","Warn: Project is vulnerable to: GHSA-gmv4-r438-p67f","Warn: Project is vulnerable to: GHSA-8h2f-7jc4-7m3m","Warn: Project is vulnerable to: GHSA-3vjf-82ff-p4r3","Warn: Project is vulnerable to: GHSA-g694-m8vq-gv9h","Warn: Project is vulnerable to: GHSA-46c4-8wrp-j99v","Warn: Project is vulnerable to: GHSA-9m6j-fcg5-2442","Warn: Project is vulnerable to: GHSA-hh27-ffr2-f2jc","Warn: Project is vulnerable to: GHSA-rqff-837h-mm52","Warn: Project is vulnerable to: GHSA-8v38-pw62-9cw2","Warn: Project is vulnerable to: GHSA-hgjh-723h-mx2j","Warn: Project is vulnerable to: GHSA-jf5r-8hm2-f872","Warn: Project is vulnerable to: GHSA-wr3j-pwj9-hqq6","Warn: Project is vulnerable to: GHSA-cf66-xwfp-gvc4","Warn: Project is vulnerable to: GHSA-4v9v-hfq4-rm2v","Warn: Project is vulnerable to: GHSA-9jgg-88mc-972h","Warn: Project is vulnerable to: GHSA-g78m-2chm-r7qv","Warn: Project is vulnerable to: GHSA-6fc8-4gx4-v693","Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q","Warn: Project is vulnerable to: GHSA-c4w7-xm78-47vh","Warn: Project is vulnerable to: GHSA-p9pc-299p-vxgp","Warn: Project is vulnerable to: GHSA-mh2h-6j8q-x246","Warn: Project is vulnerable to: GHSA-5q88-cjfq-g2mh","Warn: Project is vulnerable to: GHSA-xp63-6vf5-xf3v","Warn: Project is vulnerable to: GHSA-gxpj-cx7g-858c","Warn: Project is vulnerable to: GHSA-44pw-h2cw-w3vq","Warn: Project is vulnerable to: GHSA-jp4x-w63m-7wgm","Warn: Project is vulnerable to: GHSA-c429-5p7v-vgjp","Warn: Project is vulnerable to: GHSA-282f-qqgm-c34q","Warn: Project is vulnerable to: GHSA-gcx4-mw62-g8wm","Warn: Project is vulnerable to: GHSA-xc7v-wxcw-j472","Warn: Project is vulnerable to: GHSA-cf4h-3jhx-xvhq"],"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}}]},"last_synced_at":"2025-08-20T03:26:22.559Z","repository_id":57334401,"created_at":"2025-08-20T03:26:22.560Z","updated_at":"2025-08-20T03:26:22.560Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28670366,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-22T19:36:09.361Z","status":"ssl_error","status_checked_at":"2026-01-22T19:36:05.567Z","response_time":144,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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","react-component-library","render","render-pattern","render-prop","ui"],"created_at":"2026-01-22T20:03:43.939Z","updated_at":"2026-01-22T20:03:44.016Z","avatar_url":"https://github.com/jkomyno.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-matrix-text\n\nReactJS component that splits and renders a text in a given number of columns.\n\n--------------------------------\n\n[![Travis](https://img.shields.io/travis/jkomyno/react-matrix-text.svg)](https://travis-ci.org/jkomyno/react-matrix-text)\n[![npm](https://img.shields.io/npm/v/react-matrix-text.svg)](https://npmjs.com/package/react-matrix-text)\n[![npm](https://img.shields.io/npm/dm/react-matrix-text.svg)](https://npmjs.com/package/react-matrix-text)\n[![Issue Stats](https://img.shields.io/issuestats/i/github/jkomyno/react-matrix-text.svg)]\n\n## The problem\n\nWhile looking for new designers to follow on [Dribbble](https://dribbble.com) I bumped into [this awesome mockup](https://dribbble.com/shots/2078854-Core-Media-Hero-Exploration) which sports a matrix-like section\nwith some stylish text in it, rendered across the rows and columns. I wanted to create a React component\nas simple and flexible as possible that would emulate the same behaviour, given a sentence and the number\nof columns I want it to be subdivided in.\n\n## The solution\n\nThis component solves the problem while providing the maximum flexibility, with a really tiny API.\nThis is possible because this library uses a [render prop](https://cdb.reacttraining.com/use-a-render-prop-50de598f11ce) thanks to which you are\nthe only responsible for the rendering of practically everything. You simply have to apply props to what you're\nrendering.\nThis allows you to define your own HTML tags and classNames, without having to pass a bunch of `view` related\nparameters every time.\n\n## Table of Contents\n\n- [Installation](#installation)\n- [Props](#props)\n  - [sentence](#sentence)\n  - [columns](#columns)\n  - [renderRow](#renderrow)\n  - [renderColumn](#rendercolumn)\n- [Example](#example)\n  - [Result](#result)\n- [Typings](#typings)\n- [Available scripts](#available-scripts)\n- [License](#license)\n- [Contributing](#contributing)\n\n## Installation\n\nThe compiled version of this module is distributed via [npm](https://www.npmjs.com/) and should be installed as one of your project `dependencies`.\n\n- `yarn add react-matrix-text`\n\nOr, if you prefer using npm ([but you shouldn't](https://medium.com/@kaayru/what-is-yarn-and-should-we-use-it-dbd8c46de6a)):\n\n- `npm i -S react-matrix-text`\n\nIt requires React ^16.0.0.\n\n\u003e This package also depends on `react^16.0.0`. Please make sure your `react` version matches.\n\n## Props\n\n### columns\n\n\u003e `number` | defaults to `3`\n\nThe number of columns of the resulting matrix.\n\n### sentence\n\n\u003e `string` | defaults to `''`\n\nSentence to split into the matrix. Spaces will be removed, but punctuation marks will be kept.\n\n### renderRow\n\n\u003e `(columns: JSX.Element[], rowIndex: number) =\u003e JSX.Element`\n\nThe callback prop which renders the rows of the resulting matrix.\nIt receives a `columns` array of React Components (the rendered columns) and the index of the current row, and must return the wrapper component for them.\n\n### renderColumn\n\n\u003e `(char: string, rowIndex: number, columnIndex: number) =\u003e JSX.Element`\n\nThe callback prop which renders the single columns of the resulting matrix.\nIt receives a `char` string as argument (the current character of the sentence) and must return the wrapper component for it.\n\n### getRowKey\n\n\u003e `(charsForRow: string[], rowIndex: number) =\u003e string`\n\nCallback that should return the key to be applied to a certain row, provided the array of characters to be rendered, and the index of the current row.\nThe default generated key has the pattern `row_${rowIndex}_${charsForRow.join('')}`.\n\n### getColumnKey\n\n\u003e `(char: string, rowIndex: number, columnIndex: number) =\u003e string`\n\nCallback that should return the key to be applied to a certain column, provided the character to be rendered, the index of the current row, and the index of the current column.\nThe default generated key has the pattern `column_${rowIndex}_${columnIndex}_${char}`.\n\n## Example\n\nAn example React app which uses this module is located in the [example folder](/example).\n\n## Keys\n\nSince version `1.1.0`, there's the possibility to inject custom keys to the generated rows and columns.\nLet's first take a look at the default behaviour:\n\n```jsx\n\u003cMatrixText\n  number={3}\n  sentence=\"This is\"\n  renderRow={(columns, rowIndex) =\u003e \u003cdiv className=\"row\"\u003e{columns}\u003c/div\u003e}\n  renderColumn={(char, rowIndex, columnIndex) =\u003e \u003cspan\u003e{char}\u003c/span\u003e}\n/\u003e\n```\n\nThe interpreted JSX is the following:\n\n```html\n  \u003cdiv key=\"row_0_THI\" className=\"row\"\u003e\n    \u003cspan key=\"col_0_0_E\"\u003eT\u003c/span\u003e\n    \u003cspan key=\"col_0_1_E\"\u003eH\u003c/span\u003e\n    \u003cspan key=\"col_0_2_E\"\u003eI\u003c/span\u003e\n  \u003c/div\u003e\n  \u003cdiv key=\"row_1_SIS\" className=\"row\"\u003e\n    \u003cspan key=\"col_1_0_E\"\u003eS\u003c/span\u003e\n    \u003cspan key=\"col_1_1_E\"\u003eI\u003c/span\u003e\n    \u003cspan key=\"col_1_2_E\"\u003eS\u003c/span\u003e\n  \u003c/div\u003e\n```\n\nWith custom keys, the situation is the following:\n\n```jsx\n\u003cMatrixText\n  number={3}\n  sentence=\"This is\"\n  renderRow={(columns, rowIndex) =\u003e \u003cdiv className=\"row\"\u003e{columns}\u003c/div\u003e}\n  renderColumn={(char, rowIndex, columnIndex) =\u003e \u003cspan\u003e{char}\u003c/span\u003e}\n  getColumnKey={(char, rowIndex, columnIndex) =\u003e `c${rowIndex}/${columnIndex}/${char}`}\n  getRowKey={(charsForRow, rowIndex) =\u003e `r${index}`}\n/\u003e\n```\n\nThe interpreted JSX is now the following:\n\n```html\n  \u003cdiv key=\"r0\" className=\"row\"\u003e\n    \u003cspan key=\"c0/0/E\"\u003eT\u003c/span\u003e\n    \u003cspan key=\"c/0/1/E\"\u003eH\u003c/span\u003e\n    \u003cspan key=\"c/0/2/E\"\u003eI\u003c/span\u003e\n  \u003c/div\u003e\n  \u003cdiv key=\"r1\" className=\"row\"\u003e\n    \u003cspan key=\"c/1/0/E\"\u003eS\u003c/span\u003e\n    \u003cspan key=\"c/1/1/E\"\u003eI\u003c/span\u003e\n    \u003cspan key=\"c/1/2/E\"\u003eS\u003c/span\u003e\n  \u003c/div\u003e\n```\n\n### Result\n\n![Example image](./images/result.jpg)\n\n## Typings\n\nWhile this project used the Flow type system until version `0.1.0`, but it's entirely written in TypeScript 3.0 since version `1.0.0`.\n\n## Available Scripts\n\n- `clean`: Deletes the compiled lib folder;\n- `build`: Runs the clean script and compiles `src/**/*.(ts|x)` files to `lib/**/*.js`;\n- `lint`: Runs tslint;\n- `test`: Runs the test suites with jest;\n- `test:watch`: Runs the tests in watch mode;\n- `test:cov`: Runs the tests and displays coverage\n- `test:ci`: Tests lint, and jest errors at once\n\n## License\n\nThis project is [MIT](LICENSE) licensed.\n\n## Contributing\n\nPull requests are welcome!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjkomyno%2Freact-matrix-text","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjkomyno%2Freact-matrix-text","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjkomyno%2Freact-matrix-text/lists"}