{"id":15155375,"url":"https://github.com/kevlened/use-flipper","last_synced_at":"2026-01-20T04:32:10.548Z","repository":{"id":57388054,"uuid":"253847386","full_name":"kevlened/use-flipper","owner":"kevlened","description":":dolphin: useFlipper React hook for CSS-only dropdowns, toggles, or custom checkboxes","archived":false,"fork":false,"pushed_at":"2020-04-08T20:35:38.000Z","size":255,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-27T01:40:26.434Z","etag":null,"topics":["css","css-only","hook","next-js","react","react-hook","ssr"],"latest_commit_sha":null,"homepage":"https://kevlened.github.io/use-flipper/","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/kevlened.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":"2020-04-07T16:14:20.000Z","updated_at":"2020-04-08T20:39:38.000Z","dependencies_parsed_at":"2022-09-05T12:22:07.605Z","dependency_job_id":null,"html_url":"https://github.com/kevlened/use-flipper","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kevlened%2Fuse-flipper","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kevlened%2Fuse-flipper/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kevlened%2Fuse-flipper/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kevlened%2Fuse-flipper/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kevlened","download_url":"https://codeload.github.com/kevlened/use-flipper/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247542740,"owners_count":20955856,"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":["css","css-only","hook","next-js","react","react-hook","ssr"],"created_at":"2024-09-26T18:20:49.405Z","updated_at":"2026-01-20T04:32:10.539Z","avatar_url":"https://github.com/kevlened.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# use-flipper\n`useFlipper` React hook for css-only dropdowns, toggles, or custom checkboxes\n\n## What\nMost modern sites require js to be loaded, parsed and executed before use. Server-side rendering performs the first render without js, but it's still required for interactivity. `useFlipper` enables interactivity without js.\n\n## API\n* **Provider** - Adds the necessary global context\n* **useFlipper** - Returns **Flipper**, **FlippedOn**, **FlippedOff**\n  * **Flipper** - Component defines a clickable area\n  * **FlippedOn** - Component renders when the flipper is clicked on\n  * **FlippedOff** - Component renders when the flipper is clicked off\n\n## Next.js example\n[Live preview here](https://kevlened.github.io/use-flipper)\n\n1. Add the `Provider` to the root of the app.\n\n    ```js\n    // pages/_app.js\n\n    import React from 'react';\n    import App from 'next/app';\n    import {Provider} from 'use-flipper';\n\n    class MyApp extends App {\n      render() {\n        const {Component, pageProps} = this.props;\n        return (\n          {/* count is 1 by default */}\n          \u003cProvider count={3}\u003e\n            \u003cComponent {...pageProps} /\u003e\n          \u003c/Provider\u003e\n        );\n      }\n    }\n\n    export default MyApp;\n    ```\n\n2. Add `useFlipper` where you want interactivity.\n\n    ```js\n    // pages/home.js\n\n    import {useFlipper} from 'use-flipper';\n\n    const Home = () =\u003e {\n      const {Flipper, FlippedOn, FlippedOff} = useFlipper();\n      return (\n        \u003cdiv\u003e\n          \u003cFlipper\u003eFlip\u003c/Flipper\u003e\n          \u003cFlippedOn\u003eOn\u003c/FlippedOn\u003e\n          \u003cFlippedOff\u003eOff\u003c/FlippedOff\u003e\n        \u003c/div\u003e\n      )\n    }\n\n    export default Home;\n    ```\n\n## Compatibility\nIE11+\n\n## Limitations\n1. The `Flipper` component cannot contain `input` or `button` tags (or anything that captures the click)\n2. For more than one `Flipper` to work without js, you must provide `count` to `Provider`\n3. Accessibility is untested\n\n\n## How it works\nThe state of checkboxes can be queried in css. When a `label` for a checkbox is clicked, it toggles the checkbox. Hide the checkbox, then style the `label`, and you have a css-only button that can toggle the display of other dom elements.\n\n## License\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkevlened%2Fuse-flipper","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkevlened%2Fuse-flipper","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkevlened%2Fuse-flipper/lists"}