{"id":13725350,"url":"https://github.com/ennisj9/htmf-react","last_synced_at":"2025-05-07T20:32:11.084Z","repository":{"id":44035632,"uuid":"225499489","full_name":"ennisj9/htmf-react","owner":"ennisj9","description":"React HTMF implementation. Native javascript jsx alternative.","archived":false,"fork":false,"pushed_at":"2023-01-05T02:11:43.000Z","size":1330,"stargazers_count":3,"open_issues_count":16,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-08-04T01:27:39.821Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/ennisj9.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":"2019-12-03T01:02:40.000Z","updated_at":"2021-08-12T11:11:15.000Z","dependencies_parsed_at":"2023-02-03T05:31:55.532Z","dependency_job_id":null,"html_url":"https://github.com/ennisj9/htmf-react","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ennisj9%2Fhtmf-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ennisj9%2Fhtmf-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ennisj9%2Fhtmf-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ennisj9%2Fhtmf-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ennisj9","download_url":"https://codeload.github.com/ennisj9/htmf-react/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224645341,"owners_count":17346128,"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":[],"created_at":"2024-08-03T01:02:20.264Z","updated_at":"2024-11-14T15:31:14.076Z","avatar_url":"https://github.com/ennisj9.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# htmf-react\nAn [HTMF](https://www.npmjs.com/package/htmf) implementation for use with react. Using HTMF allows for quick DOM expression without JSX.\n\n## Usage\n\n```\n$ npm i htmf-react\n```\nAn example of creating a react component with HTMF:\n```javascript\nimport Mf from 'htmf-react';\n\nfunction LoginBlock(){\n\n  const handleSubmit = e =\u003e {\n    //\n  }\n\n  return Mf($ =\u003e { $ \n    .a('div #login')\n      .b('h3 .headerclass')\n        .text('Please login')\n      .b('form').submit(handleSubmit)\n        .c('label' {for: 'username'})\n          .text('Username')\n        .c('input .inputBox', {type: 'text', name: 'username'})\n        .c('label' {for: 'password'})\n          .text('Password')\n        .c('input .inputBox', {type: 'password', name: 'password'})\n      .b('input', {type: 'submit', value: 'Sign in'}) \n      .b('a', {href: '/resetPassword'})\n        .text('Forgot password')\n  })\n\n}\nexport default LoginBlock;\n```\nIn addition to HTMF core features, htmf-react adds the following helper event functions:\n\n```\nkeyDown, keyPress, keyUp,\nblur, focus,\nchange, input, submit,\nclick, contextMenu, doubleClick, mouseDown, mouseUp,\nmouseEnter, mouseLeave, mouseMove, mouseOut, mouseOver\n```\nSo that you can add event listeners easily.\n\n## Quick examples\n\nEasier events:\n\n```javascript\n$\n.a('div')\n  .b('div .button').click(e =\u003e alert('button clicked!'))\n```\n\nSingle element by passing in an array instead of a function:\n\n```javascript\nlet divWithText = Mf(['div .class', {attrkey: 'value'}], 'some text inside');\n```\n\nAnd finally, a shorthand for creating text nodes:\n\n```javascript\n$\n.a('div')\n  .b(String, 'an inline ')\n  .b('span').text('span with')\n  .b(String, ' text around it')\n\n//\u003cdiv\u003ean inline \u003cspan\u003espan with\u003c/span\u003e text around it\u003c/div\u003e\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fennisj9%2Fhtmf-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fennisj9%2Fhtmf-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fennisj9%2Fhtmf-react/lists"}