{"_id":"@dooboo-ui/snackbar","_rev":"5-82821a074b1828f438466518e04c1a0d","name":"@dooboo-ui/snackbar","dist-tags":{"latest":"0.0.1"},"versions":{"0.0.1":{"name":"@dooboo-ui/snackbar","main":"lib/index.js","types":"lib/index.d.ts","version":"0.0.1","license":"MIT","postinstall":"tsc","scripts":{"build":"rm -rf ./lib && tsc","watch":"tsc -w"},"repository":{"type":"git","url":"git+https://github.com/dooboolab/dooboo-ui.git","directory":"src/components/shared/Snackbar"},"bugs":{"url":"https://github.com/dooboolab/dooboo-ui/issues"},"homepage":"https://github.com/dooboolab/dooboo-ui#readme","dependencies":{"dooboolab-welcome":"^1.1.1"},"devDependencies":{"styled-components":"^4.4.0","typescript":"^3.6.4"},"peerDependencies":{"react":">=16.8","react-native":">=0.59","styled-components":">=4.4.0"},"publishConfig":{"access":"public"},"keywords":["snackbar","react-hook","react-native","dooboo-ui/native","dooboolab"],"description":"> Simple snackbar for react-native.","_id":"@dooboo-ui/snackbar@0.0.1","_nodeVersion":"12.14.1","_npmVersion":"6.13.4","dist":{"integrity":"sha512-WxlRhJTTnpkmssFX1T51it3EbLGkpVZSAGaTzsh0a2GlRGurJTy8A/4gB1rfyTHSkaiceM5gldHCaSzBDr88tA==","shasum":"0dedfe6f6bc5db3a3913ec0e025f0d65edc9f6d6","tarball":"https://registry.npmjs.org/@dooboo-ui/snackbar/-/snackbar-0.0.1.tgz","fileCount":16,"unpackedSize":905085,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6tYeCRA9TVsSAnZWagAAqQcP/1q8USBuE3vg+icytAfM\nwp60rIElBBc8B5hb/5FPXoxe2jmGpRZiLyT1ZzattGKZtsBj8zt7gXGfmraF\nZQQTTX0CYQd3lX1laOGoL0iu9rQivcsAu6ncUxrgTaUvIvsHs2nu2VwXTwZK\n6nqWlJU6EjyyHHfVMVCmriokxmkHfyqrPk8KNk6QuIxb5g8w9+Ao/0WOG/AB\n77UEXbaZDavBTBkjVT2bAyQsFz5l7s+zdegz55+hQcI4tXTqhH7Kp3uUYXDM\nbgAGHImICKKT+FDf3+bymyzSt0BLDUbN+nLjJ2NSGQdVkbX1l1MUEPfiCSiV\nZFnE8mHYCX5vrROgyzrjetFzYZikbT+Mp7G+gMMNulh7seWfacDgDVx0zu3g\nZu7d3J8usLV5u+8YKlqy80TcJqn6G4y0SIHHbloQBJEtkGwIIyUHimL+6H54\nfd6iZriK5LmMtrER+Bq2q8NolWlJFScqBh9dCzK05yhoCmrpLfEWFZCN0J1N\nD1HmgxA5gF94PKfLtBYyHxxWRcU32jMaX0YcH+GD9R8DvULpmHftJg0XFyFx\nlc5zRuHy79nLQiIixGGlQPvoNU9QGzGU3jE3PQf5292XVJNOWOn+puBLfmKO\nDmlD43Zl2V6W6g2FO5M/xtVLdYAzuswGXhCl7e+9i+pxlaD3vGMNnmbAF26S\nUUMt\r\n=gQlI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDk6pRMy1nYciuYrTVcaoFJUOSPbWVu+cwG+OrGOHbFcQIhAIgNbfjYJb8t6rFSa0dSwq7AFV+DDguoQQjeGO5Z7TU3"}]},"maintainers":[{"name":"dooboolab","email":"dooboolab@gmail.com"}],"_npmUser":{"name":"dooboolab","email":"dooboolab@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/snackbar_0.0.1_1592448541906_0.5109603759605794"},"_hasShrinkwrap":false}},"time":{"created":"2020-06-18T02:49:01.257Z","0.0.1":"2020-06-18T02:49:02.053Z","modified":"2022-04-05T05:16:10.066Z"},"maintainers":[{"email":"lastchoice86@naver.com","name":"jongtaek"},{"email":"do02reen24@gmail.com","name":"do02reen24"},{"email":"dooboolab@gmail.com","name":"dooboolab"}],"description":"> Simple snackbar for react-native.","homepage":"https://github.com/dooboolab/dooboo-ui#readme","keywords":["snackbar","react-hook","react-native","dooboo-ui/native","dooboolab"],"repository":{"type":"git","url":"git+https://github.com/dooboolab/dooboo-ui.git","directory":"src/components/shared/Snackbar"},"bugs":{"url":"https://github.com/dooboolab/dooboo-ui/issues"},"license":"MIT","readme":"# Snackbar\n\n> Simple snackbar for react-native.\n\n## Installation\n\nAt this point, this component has not yet been published, and after it has been published, it may be installed with the command below.\n\n```sh\nyarn add @dooboo-ui\n```\n\nor\n\n```sh\nyarn add @dooboo-ui/snackbar\n```\n## Usage\n### Types\n\n```ts\nexport enum Timer {\n  SHORT = 1500,\n  LONG = 3000,\n}\n\nexport interface SnackbarProps {\n  testID?: string;\n  ref: React.MutableRefObject<SnackbarRef>;\n}\n\nexport interface SnackbarRef {\n  show(content: Content): void;\n}\n\nexport interface Content {\n  text: string;\n  actionText?: string;\n  timer?: Timer;\n  actionStyle?: TextStyle;\n  containerStyle?: ViewStyle;\n  messageStyle?: TextStyle;\n  onPressAction?: () => void;\n}\n\n```\n\n- SnackbarProps\n\n|         | necessary | types                   | default   | info         |\n| ------- | :-------: | ----------------------- | --------- | ------------ |\n| ref     |     v     | MutableRefObject        | undefined |              |\n| testID  |           | string                  | undefined |              |\n\n- Content\n\nAn object of this type is needed to show an Snackbar. \n\n|                | necessary | types            | default            | info               |\n| -------------- | :-------: | ---------------- | ------------------ | ------------------ |\n| text           |     v     | string           | undefined          |                    |\n| timer          |           | number           | 1500 (Timer.SHORT) | Closing time       |\n| messageStyle   |           | TextStyle        | undefined          | Message text style |\n| containerStyle |           | ViewStyle        | undefined          |                    |\n| actionText     |           | string           | undefined          |                    |\n| actionStyle    |           | TextStyle        | undefined          | Action text style  |\n| onPressAction  |           | function         | undefined          |                    |\n\n### Getting started\n\n- Import\n\n  ```tsx\n  import Snackbar from '@dooboo-ui/snackbar';\n  ```\n\n- Using Component\n  ```tsx\n\n  function Container(): React.ReactElement {\n    const snackbar = useRef<SnackbarRef>(null);\n    const onPress = (): void => {\n      snackbar.current && snackbar.current.show({\n        text: 'Simple Snackbar is opened',\n      });\n    };\n    return (\n      <SafeAreaView style={{ flex: 1 }}>\n        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>\n          <TouchableOpacity onPress={onPress} style={{ borderWidth: 1, padding: 10 }}>\n            <Text>Show Snackbar</Text>\n          </TouchableOpacity>\n          <Snackbar ref={snackbar}/>\n        </View>\n      </SafeAreaView>\n    );\n  }\n\n  ```\n\nTo show a `Snackbar` component, just provide `ref` props to the component and call the `show` function  (with a `Content` type parameter) of it.\nThis component will appear at the bottom of the parent view, **not at the bottom of the screen**.\n\n![Feb-25-2020 00-12-07](https://user-images.githubusercontent.com/17980230/75164088-961bbb00-5763-11ea-8e89-096b15a3e787.gif)\n\n- Using Provider\n\nYou can also set SnackbarProvider to use Snackbar component. \n``` tsx\n  function Container(): React.ReactElement {\n    const snackbar = useSnackbarContext();\n    const onPress = (): void => {\n      snackbar.show({\n        text: 'Simple Snackbar is opened',\n      });\n    };\n    return (\n      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>\n        <TouchableOpacity onPress={onPress} style={{ borderWidth: 1, padding: 10 }}>\n          <Text>Show Snackbar</Text>\n        </TouchableOpacity>\n      </View>\n    );\n  }\n\n  function Provider(): React.ReactElement {\n    return (\n      <SnackbarProvider>\n        <Container/>\n      </SnackbarProvider>\n    );\n  }\n\n```\nFor versions after iPhone x, Snackbar will overlap with the gesture bar. Previously, Snackbar was put in SafeAreaView, but this could be a problem and changed to use View. We recommend that using 'defaultContent' like below.\n\n```typescript\n  function Provider(): React.ReactElement {\n    return (\n      <SnackbarProvider\n        defaultContent={{ containerStyle: { bottom: safeAreaBottom + 10 }}}\n      >\n        <Container/>\n      </SnackbarProvider>\n    );\n  }\n```\n\n- Using some Action\n\nTo add some action to the Snackbar, just add options about the action to the show function.\n\n``` tsx\n    snackbar.show({\n      text: 'Simple Snackbar is opened',\n      actionText: 'Some action',\n      onPressAction: () => Alert.alert('Some action occurs!!'),\n    });\n```\n\n![Feb-25-2020 00-16-47](https://user-images.githubusercontent.com/17980230/75164429-265a0000-5764-11ea-9c6f-12bf362dc32b.gif)\n\n- More Complex Examples\n\nYou can find more complex usages on this [storybook codes](storybook/stories/Snackbr.stories.tsx). \n","readmeFilename":"README.md"}