https://github.com/kevlened/use-flipper
:dolphin: useFlipper React hook for CSS-only dropdowns, toggles, or custom checkboxes
https://github.com/kevlened/use-flipper
css css-only hook next-js react react-hook ssr
Last synced: about 1 month ago
JSON representation
:dolphin: useFlipper React hook for CSS-only dropdowns, toggles, or custom checkboxes
- Host: GitHub
- URL: https://github.com/kevlened/use-flipper
- Owner: kevlened
- License: mit
- Created: 2020-04-07T16:14:20.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2020-04-08T20:35:38.000Z (about 5 years ago)
- Last Synced: 2025-03-27T01:40:26.434Z (about 2 months ago)
- Topics: css, css-only, hook, next-js, react, react-hook, ssr
- Language: JavaScript
- Homepage: https://kevlened.github.io/use-flipper/
- Size: 249 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# use-flipper
`useFlipper` React hook for css-only dropdowns, toggles, or custom checkboxes
## What
Most 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.
## API
* **Provider** - Adds the necessary global context
* **useFlipper** - Returns **Flipper**, **FlippedOn**, **FlippedOff**
* **Flipper** - Component defines a clickable area
* **FlippedOn** - Component renders when the flipper is clicked on
* **FlippedOff** - Component renders when the flipper is clicked off
## Next.js example
[Live preview here](https://kevlened.github.io/use-flipper)
1. Add the `Provider` to the root of the app.
```js
// pages/_app.js
import React from 'react';
import App from 'next/app';
import {Provider} from 'use-flipper';
class MyApp extends App {
render() {
const {Component, pageProps} = this.props;
return (
{/* count is 1 by default */}
);
}
}
export default MyApp;
```
2. Add `useFlipper` where you want interactivity.
```js
// pages/home.js
import {useFlipper} from 'use-flipper';
const Home = () => {
const {Flipper, FlippedOn, FlippedOff} = useFlipper();
return (
Flip
On
Off
)
}
export default Home;
```
## Compatibility
IE11+
## Limitations
1. The `Flipper` component cannot contain `input` or `button` tags (or anything that captures the click)
2. For more than one `Flipper` to work without js, you must provide `count` to `Provider`
3. Accessibility is untested
## How it works
The 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.
## License
MIT