{"id":21045471,"url":"https://github.com/ymzuiku/react-dom-pseudo","last_synced_at":"2026-01-23T14:44:07.254Z","repository":{"id":65473219,"uuid":"153666004","full_name":"ymzuiku/react-dom-pseudo","owner":"ymzuiku","description":"像CSS一样使用伪类的React组件 \\ Like CSS Pseudo in React","archived":false,"fork":false,"pushed_at":"2018-12-30T07:25:32.000Z","size":420,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-10-11T05:53:00.455Z","etag":null,"topics":["css","pseudo","react","react-component","react-dom","renderprops"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/ymzuiku.png","metadata":{"files":{"readme":"README-EN.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":"2018-10-18T18:02:15.000Z","updated_at":"2021-12-12T00:38:42.000Z","dependencies_parsed_at":"2023-01-25T12:16:00.334Z","dependency_job_id":null,"html_url":"https://github.com/ymzuiku/react-dom-pseudo","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/ymzuiku/react-dom-pseudo","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ymzuiku%2Freact-dom-pseudo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ymzuiku%2Freact-dom-pseudo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ymzuiku%2Freact-dom-pseudo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ymzuiku%2Freact-dom-pseudo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ymzuiku","download_url":"https://codeload.github.com/ymzuiku/react-dom-pseudo/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ymzuiku%2Freact-dom-pseudo/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28694457,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-23T14:15:13.573Z","status":"ssl_error","status_checked_at":"2026-01-23T14:09:05.534Z","response_time":59,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: 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":["css","pseudo","react","react-component","react-dom","renderprops"],"created_at":"2024-11-19T14:22:37.199Z","updated_at":"2026-01-23T14:44:07.229Z","avatar_url":"https://github.com/ymzuiku.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![](.imgs/hover.gif)\n\n## [中文文档](README.md)\n\nCSS in JS is great, but how do you handle the convenience of handling Pseudo-classes? **react-dom-pseudo** provides a component like the `react-motion` method, conveniently a `react-dom` object Provide pseudo-classes like CSS.\n\nWe first install with `npm`:\n\n```sh\n$ npm install --save react-dom-pseudo\n```\n\n## APIs\n\n**react-dom-pseudo** following pseudo-classes are supported：\n\nWill merge with all styles and override duplicate style properties\n\n| Props        | Analog pseudo-class | Description                                     | Default Value | Is Must |\n| ------------ | ------------------- | ----------------------------------------------- | ------------- | ------- |\n| merge        |                     | Whether to merge with `style` and `otherStyles` | true          | No      |\n| disable      |                     | Whether to cancel the event listener            | false         | No      |\n| style        |                     | Style of default                                | undefined     | No      |\n| linkStyle    | :link               | Style of not clicked before                     | undefined     | No      |\n| visitedStyle | :visited            | Style of that has been clicked                  | undefined     | No      |\n| focusStyle   | :focus              | Style of type element such as input onFocus     | undefined     | No      |\n| hoverStyle   | :hover              | Style of displayed when the mouse is moved in   | undefined     | No      |\n| activeStyle  | :active             | Style of when mouse or touch screen clicks      | undefined     | No      |\n| disableStyle |                     | Style of when disable event listener            | undefined     | No      |\n| alwayStyle   |                     | Merge with all styles                           | undefined     | No      |\n\nThey will trigger based on the event，and merge `style`， like `{...style, ...activeStyle}`\n\nOnly existing styles will be merged\n\nCombination rules for styles: `{...style, ...linkStyle, ...eventStyle, ...disableStyle, ...alwayStyle}`\n\n## Use\n\n```js\nimport Pseudo from 'react-dom-pseudo';\n\nexport default () =\u003e {\n  return (\n    \u003cdiv\u003e\n      \u003cdiv\u003eexample:\u003c/div\u003e\n      \u003cPseudo\n        style={sheet.input}\n        hoverStyle={sheet.inputHover}\n        focusStyle={sheet.inputFocus}\n      \u003e\n        {events =\u003e \u003cinput {...events} /\u003e}\n      \u003c/Pseudo\u003e\n    \u003c/div\u003e\n  );\n};\n\n// CSS in js\nconst sheet = {\n  input: {\n    fontSize: '14px',\n    border: '1px solid rgba(0,0,0,0)',\n    background: '#f3f3f3',\n    // use transition animate\n    transition: 'all 0.2s ease-out',\n  },\n  inputHover: {\n    background: '#f0f0f0',\n  },\n  inputFocus: {\n    border: '1px solid rgba(0,0,0,0.1)',\n    background: '#f0f0f3',\n    transitionTimingFunction: 'ease-in',\n  },\n};\n```\n\n## What did it do?\n\nPseudo's renderProps contains the following events:\n\n- onClick: Used to simulate :link \u0026 :visited\n- onFocus\\Blur: Used to simulate :focus\n- onMouseEnter\\Leave: Used to simulate :hover\n- onMouseDown\\Up: Used to simulate :active\n\nIf the project is executed on the mobile side, it will\n`onMouse?` changeTo `onTouch?`\n\n## License\n\n```\nMIT License\n\nCopyright (c) 2013-present, Facebook, Inc.\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fymzuiku%2Freact-dom-pseudo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fymzuiku%2Freact-dom-pseudo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fymzuiku%2Freact-dom-pseudo/lists"}