{"id":20827237,"url":"https://github.com/ccnokes/react-toggle-display","last_synced_at":"2025-05-07T21:03:30.759Z","repository":{"id":34570029,"uuid":"38516117","full_name":"ccnokes/react-toggle-display","owner":"ccnokes","description":"Hide/show a component's children. It's like ng-show or ng-hide for react.","archived":false,"fork":false,"pushed_at":"2023-03-05T10:31:29.000Z","size":313,"stargazers_count":51,"open_issues_count":3,"forks_count":9,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-05-07T21:03:07.089Z","etag":null,"topics":["component","react","unicorns"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/ccnokes.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":"2015-07-04T00:53:49.000Z","updated_at":"2024-12-30T09:34:29.000Z","dependencies_parsed_at":"2024-06-18T15:41:03.746Z","dependency_job_id":null,"html_url":"https://github.com/ccnokes/react-toggle-display","commit_stats":{"total_commits":53,"total_committers":6,"mean_commits":8.833333333333334,"dds":"0.16981132075471694","last_synced_commit":"25d514420d36bb8c466e70b9d0f1b67a177c0a3e"},"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ccnokes%2Freact-toggle-display","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ccnokes%2Freact-toggle-display/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ccnokes%2Freact-toggle-display/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ccnokes%2Freact-toggle-display/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ccnokes","download_url":"https://codeload.github.com/ccnokes/react-toggle-display/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252954409,"owners_count":21830902,"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":["component","react","unicorns"],"created_at":"2024-11-17T23:11:32.961Z","updated_at":"2025-05-07T21:03:30.702Z","avatar_url":"https://github.com/ccnokes.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-toggle-display\n\n[![Build Status](https://travis-ci.org/ccnokes/react-toggle-display.svg?branch=master)](https://travis-ci.org/ccnokes/react-toggle-display)\n\nA stateless react component that toggles the display of it's children. It's like `ng-show`, `ng-hide` or `ng-if` but for react.\n\nThis allows you to DRY up statements like this:\n\n```javascript\n\u003cdiv className={this.props.shouldHide ? 'hidden' : ''}\u003e\n```\n\nExample usage:\n\n```javascript\nimport React, { Component } from 'react';\nimport ToggleDisplay from 'react-toggle-display';\n\nclass App extends Component {\n  constructor() {\n    super();\n    this.state = { show: false };\n  }\n\n  handleClick() {\n    this.setState({\n      show: !this.state.show\n    });\n  }\n\n  render() {\n    return (\n      \u003cdiv className=\"App\"\u003e\n        \u003cp className=\"App-intro\"\u003e\n          \u003cbutton onClick={ () =\u003e this.handleClick() }\u003eToggle things\u003c/button\u003e\n        \u003c/p\u003e\n        \u003cToggleDisplay show={this.state.show}\u003e\n          I am rendered in a span (by default) and hidden with display:none when show is false.\n        \u003c/ToggleDisplay\u003e\n\n        \u003cToggleDisplay if={this.state.show} tag=\"section\"\u003e\n          I am rendered in a section and removed from the DOM when if is false.\n        \u003c/ToggleDisplay\u003e\n      \u003c/div\u003e\n    );\n  }\n}\n\nexport default App;\n\n```\n[View demo](https://jsfiddle.net/ccnokes/oqttsu83/)\n\n\n## Props\n\n`hide` - boolean\n\n`show` - boolean\n\n`if` - boolean\n\n`tag` - string. The tag name to use as the ToggleDisplay element. Defaults to span.\n\nThe two first props are simply the inverse of each other. Using both at the same time will result in canceling each other out.\n\n\n## Install\n\n```\nnpm install react-toggle-display\n```\n\n## Tests\n\nTo run tests: `npm test`\n\n\n\n## Contributors\n\nBig thanks to [willgm](https://github.com/willgm) for his contributions.\n\n\n## Change Notes\n\nNote that if you are using a version under 0.1.1, you will have to compile react-toggle-display's JSX yourself. I recommend just updating to 1.x so you don't have to worry about that. No breaking API changes in 1.x.\n\nWhile v2 does not change anything functionally, it was refactored to be a [\"stateless functional component\"](https://facebook.github.io/react/blog/2015/10/07/react-v0.14.html#stateless-functional-components), which won't work in React versions less than 0.14.\n\nv2.2 adds the `prop-types` package to get rid of some warnings when using React 15.5\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fccnokes%2Freact-toggle-display","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fccnokes%2Freact-toggle-display","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fccnokes%2Freact-toggle-display/lists"}