https://github.com/mvr-studio/chakra-stories
https://github.com/mvr-studio/chakra-stories
chakra chakra-ui component framer-motion react stories
Last synced: 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/mvr-studio/chakra-stories
- Owner: mvr-studio
- License: mit
- Created: 2022-04-03T21:53:00.000Z (about 3 years ago)
- Default Branch: master
- Last Pushed: 2022-04-05T21:03:07.000Z (about 3 years ago)
- Last Synced: 2025-03-18T03:47:06.712Z (2 months ago)
- Topics: chakra, chakra-ui, component, framer-motion, react, stories
- Language: TypeScript
- Homepage: https://chakra-stories.netlify.app/
- Size: 4.46 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Chakra UI Stories
Programmatic Stories component for Chakra UI.
## Installation
```sh
$ yarn add @mvr-studio/chakra-stories
```
## Components
### Stories
`Stories` is the bare bone component of this library which renders indicators, content and additional data.
#### Usage
```tsx
import { Box } from '@chakra-ui/react'
import { Stories } from '@mvr-studio/chakra-stories'
const View = () => {
return (
First
Second
Third
)
}
```
#### API
- children: `ReactNode[]`
- storyDuration?: `number` - Duration of each story in seconds.
- onStoriesCompleted?: `() => void` - Callback to fire when the last story finishes.
- indicator?:
- activeColor?: `string` - Animated indicator active color.
- inactiveColor?: `string` - Inactive indicator color.
- components?:
- renderTopBar?: `({ currentStory, storiesCount }) => JSX.Element` - Function to render Top Bar with additional data.
- renderBottomBar?: `({ currentStory, storiesCount }) => JSX.Element` - Function to render Bottom Bar with additional data.
### ModalStories
`ModalStories` is an extended version of `Stories`, which wraps `Stories` component into a Modal. It extends props of `Stories`, so you can use all the properties of `Stories` plus some more.
#### Usage
```tsx
import { useDisclosure, Box, Button } from '@chakra-ui/react'
import { ModalStories } from '@mvr-studio/chakra-stories'
const View = () => {
const { isOpen, onOpen, onClose } = useDislcosure()
return (
Open Stories
First
Second
Third
)
}
```
#### API
- All the properties of `Stories`
- isOpen: `boolean`
- onClose: `() => void`
- modalContentProps?: `ModalContentProps` - Accepts similar props to box. Refer to Chakra UI docs.
- onDragUp: `({ currentStory, storiesCount }) => void` - Callback for handling user's drag up gesture.
## External links
[Storybook](https://chakra-stories.netlify.app/)
[MVR Studio](https://mvr.studio/)