use-flipper
v0.1.5
Published
`useFlipper` React hook for css-only dropdowns, toggles, or custom checkboxes
Downloads
1
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
Add the
Provider
to the root of the app.// 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 */} <Provider count={3}> <Component {...pageProps} /> </Provider> ); } } export default MyApp;
Add
useFlipper
where you want interactivity.import {useFlipper} from 'use-flipper'; const Home = () => { const {Flipper, FlippedOn, FlippedOff} = useFlipper(); return ( <div> <Flipper>Flip</Flipper> <FlippedOn>On</FlippedOn> <FlippedOff>Off</FlippedOff> </div> ) } export default Home;
Compatibility
IE11+
Limitations
Flipper
components cannot containinput
orbutton
tags- For more than one
Flipper
to work without js, you must providecount
toProvider
- 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