{"id":19245766,"url":"https://github.com/sakura90/react-word-section","last_synced_at":"2026-05-05T08:33:22.432Z","repository":{"id":57347809,"uuid":"395555222","full_name":"sakura90/react-word-section","owner":"sakura90","description":"react-word-section gives multiple UI representations of a word section that has a subject followed by the text content.","archived":false,"fork":false,"pushed_at":"2021-08-13T21:26:03.000Z","size":545,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-11-27T09:57:40.138Z","etag":null,"topics":["npm","react","react-component","reactui","section","text"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sakura90.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-08-13T07:18:57.000Z","updated_at":"2021-08-13T21:26:06.000Z","dependencies_parsed_at":"2022-08-28T03:01:43.602Z","dependency_job_id":null,"html_url":"https://github.com/sakura90/react-word-section","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"purl":"pkg:github/sakura90/react-word-section","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sakura90%2Freact-word-section","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sakura90%2Freact-word-section/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sakura90%2Freact-word-section/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sakura90%2Freact-word-section/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sakura90","download_url":"https://codeload.github.com/sakura90/react-word-section/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sakura90%2Freact-word-section/sbom","scorecard":{"id":796180,"data":{"date":"2025-08-11","repo":{"name":"github.com/sakura90/react-word-section","commit":"8c7f82f5cfefcd77c4418195196ff9d8d3e75191"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":1.6,"checks":[{"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":"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":"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":"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":"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":"SAST","score":0,"reason":"no SAST tool detected","details":["Warn: no pull requests merged into dev branch"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Code-Review","score":0,"reason":"Found 0/14 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":"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":"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":"License","score":0,"reason":"license file not detected","details":["Warn: project does not have a license file"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"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 'main'"],"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":"Vulnerabilities","score":2,"reason":"8 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw","Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw","Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg","Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275","Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv","Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3","Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw","Warn: Project is vulnerable to: GHSA-j8xg-fqg3-53r7"],"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-23T09:02:42.828Z","repository_id":57347809,"created_at":"2025-08-23T09:02:42.828Z","updated_at":"2025-08-23T09:02:42.828Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32642007,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-04T10:08:07.713Z","status":"online","status_checked_at":"2026-05-05T02:00:06.033Z","response_time":54,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":["npm","react","react-component","reactui","section","text"],"created_at":"2024-11-09T17:29:19.922Z","updated_at":"2026-05-05T08:33:22.412Z","avatar_url":"https://github.com/sakura90.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-word-section\n\nThis library gives developers other appropriate options of displaying a word section \nrepresented by a subject following the content of the text information in addition to simply displaying a subject on top of the text content.\n\nThis library gives 6 ways of displaying a section of text.  \n\n### Common\n\nThe subject text is larger than the content text.\n\nPC:\n\n\u003cp align=\"left\"\u003e\n  \u003cimg width=\"100%\" src=\"READMEHelperFiles/common_pc.png\" /\u003e\n\u003c/p\u003e\n\nMobile:\n\n\u003cp align=\"left\"\u003e\n  \u003cimg width=\"50%\" src=\"READMEHelperFiles/common_mobile.png\" /\u003e\n\u003c/p\u003e\n\n### Vertical Line\n\nOn top of the common style, a vertical line is added to the left of the subject text.\n\nPC:\n\n\u003cp align=\"left\"\u003e\n  \u003cimg width=\"100%\" src=\"READMEHelperFiles/verticalLine_pc.png\" /\u003e\n\u003c/p\u003e\n\nMobile:\n\n\u003cp align=\"left\"\u003e\n  \u003cimg width=\"50%\" src=\"READMEHelperFiles/verticalLine_mobile.png\" /\u003e\n\u003c/p\u003e\n\n### Underline\n\nOn top of the common style, an underline is added to the bottom of the subject text.\n\nPC:\n\n\u003cp align=\"left\"\u003e\n  \u003cimg width=\"100%\" src=\"READMEHelperFiles/underline_pc.png\" /\u003e\n\u003c/p\u003e\n\nMobile:\n\n\u003cp align=\"left\"\u003e\n  \u003cimg width=\"50%\" src=\"READMEHelperFiles/underline_mobile.png\" /\u003e\n\u003c/p\u003e\n\n### Background Color\n\nOn top of the common style, the subject text block has a background color.\n\n\nPC:\n\n\u003cp align=\"left\"\u003e\n  \u003cimg width=\"100%\" src=\"READMEHelperFiles/backgroundColor_pc.png\" /\u003e\n\u003c/p\u003e\n\nMobile:\n\n\u003cp align=\"left\"\u003e\n  \u003cimg width=\"50%\" src=\"READMEHelperFiles/backgroundColor_mobile.png\" /\u003e\n\u003c/p\u003e\n\n### Bold\n\nOn top of the common style, the subject text is in bold.\n\nPC:\n\n\u003cp align=\"left\"\u003e\n  \u003cimg width=\"100%\" src=\"READMEHelperFiles/bold_pc.png\" /\u003e\n\u003c/p\u003e\n\nMobile:\n\n\u003cp align=\"left\"\u003e\n  \u003cimg width=\"50%\" src=\"READMEHelperFiles/bold_mobile.png\" /\u003e\n\u003c/p\u003e\n\n### Block Corner Round\n\nOn top of the common style, a lightgrey background color is added to the text block that has the subject and the content, and the block corner becomes round.\n\nPC:\n\n\u003cp align=\"left\"\u003e\n  \u003cimg width=\"100%\" src=\"READMEHelperFiles/blockCornerRound_pc.png\" /\u003e\n\u003c/p\u003e\n\nMobile:\n\n\u003cp align=\"left\"\u003e\n  \u003cimg width=\"50%\" src=\"READMEHelperFiles/blockCornerRound_mobile.png\" /\u003e\n\u003c/p\u003e\n\n## Installation\n\n```\n$ npm install --save react-word-section\n```\n\n## Usage\n\nHere's a sample implementation that creates a word section on a dummy Create-React-App page.\n\n```tsx\nimport React from 'react';\nimport WordSection from 'react-word-section';\n\nfunction App() {\n  const subject = 'Retailers Embrace AI Tech for Improved Customer Experience';\n  const content = 'Artificial Intelligence is becoming commonplace across major industries and retail is no exception.The retail industry is looking for ways to keep up with the times and many companies have started implementing AI technology across the entire product and service cycle – from assembly to post-sale customer service interactions.';\n  \n  return (\n    \u003c\u003e\n      \u003cWordSection \n        subject={subject}\n        subjectStyle='common'\n        background='white'\n        corner='sharp'\n      \u003e\n        {content}\n      \u003c/WordSection\u003e      \n    \u003c/\u003e\n  );\n}\n\nexport default App;\n```\n\n## Options\n\n---\n\n| Option                | Type       | Required   | Default                   | Description                                                |\n| --------------------- | ---------- | ---------- | ------------------------- | ---------------------------------------------------------- |\n| `subject`             | `String`   | Yes        | N/A                       | Subject text                                               |\n| `subjectStyle`        | `String`   | No         | `common`                  | Subject text UI style.  `common`, `verticalLine`, `underline`, `backgroundColor`, or `bold`                     |\n| `background`          | `String`   | No         | `white`                   | Background color of the section. `white` or `lightgrey`    |\n| `corner`              | `String`   | No         | `sharp`                   | Corner appearance of the section block. `sharp` or `round` |\n\n## Demo\n\n[CodeSandbox](https://codesandbox.io/s/affectionate-cherry-mjvr2)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsakura90%2Freact-word-section","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsakura90%2Freact-word-section","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsakura90%2Freact-word-section/lists"}