ikouka v0.6.0
ikouka
ikouka is a component library for prototyping React-apps without the hassle of recreating the same basic components all over again.
Getting Started
First install the package:
npm install ikouka
Next, at the base of your app include the CSS:
import 'ikouka/dist/tailwind.css'
Then import and use the components:
import { Button } from 'ikouka'
Documentation
Components
A storybook with all components and their props is available here.
Hooks
useMediaQuery(query: string)
Takes in a media query as a string-value and returns a boolean indicating whether the media query is active.
import { useMediaQuery } from 'ikouka'
const isSmallScreen = useMediaQuery('(max-width: 768px)')
const isMediumScreen = useMediaQuery(
'(min-width: 769px) and (max-width: 1024px)'
)
const isLargeScreen = useMediaQuery('(min-width: 1025px)')
useBreakpoints()
Returns an object of four booleans for pre-defined breakpoint-sizes and an 'active'-Property that shows the currently active breakpoint as a string.
The built-in breakpoint-queries are:
- sm: (max-width: 768px)
- md: (min-width: 769px) and (max-width: 1024px)
- lg: (min-width: 1025px) and (max-width: 1280px)
- xl: (min-width: 1281px)
import { useBreakpoints } from 'ikouka'
const { isSm, isMd, isLg, isXl, active } = useBreakpoints()
useBreakpointValues({ sm, md, lg, xl })
Takes in an object of values for each breakpoint and returns the value for the one that's currently active.
All breakpoint-values must be explicitly defined, but they are allowed to be undefined
. (If the value for the currently active breakpoint is undefined
, the hook will also return undefined
.)
import { useBreakpointValues } from 'ikouka'
const ResponsiveButton = () => {
const size = useBreakpointValues({
sm: 'sm',
md: 'sm',
lg: 'md',
xl: 'lg'
})
return <Button size={size}>Click me</Button>
}