DOCSEARCHbyAlgolia
Submit Docs

Mobydick

website·Indexed 30 days ago

https://lad-tech.github.io/mobydick

A set of libraries designed to solve common problems for React Native developers. It includes a suite of modular packages such as @lad-tech/mobydick-core for core components, @lad-tech/mobydick-chart, @lad-tech/mobydick-calendar, @lad-tech/mobydick-markdown, @lad-tech/mobydick-utils, and @lad-tech/mobydick-drag-and-drop.

Tokens
30K
Snippets
132
Records
188
Agent score
71%

What's inside Mobydick

  2. Install @lad-tech/mobydick-chart and dependencies

    @lad-tech/mobydick-chart provides styled, high-performance charts for React Native. It depends on @lad-tech/mobydick-core, Shopify's react-native-skia, react-native-reanimated, and react-native-gesture-handler.
    npm install @lad-tech/mobydick-core @lad-tech/mobydick-chart @shopify/react-native-skia react-native-reanimated react-native-gesture-handler

  3. Install @lad-tech/mobydick-markdown and dependencies

    @lad-tech/mobydick-markdown provides styled Markdown components for React Native. It is built upon @lad-tech/mobydick-core and react-native-markdown-display.
    npm install @lad-tech/mobydick-core react-native-markdown-display @lad-tech/mobydick-markdown

  4. Install @lad-tech/mobydick-calendar

    @lad-tech/mobydick-calendar is a styled calendar component built upon @lad-tech/mobydick-core and react-native-calendars. To use it, you must install the calendar package along with its required peer dependencies.
    npm install @lad-tech/mobydick-core @lad-tech/mobydick-calendar react-native-calendars

  6. Manage blog posts in Docusaurus

    Docusaurus blogging features are powered by the @docusaurus/plugin-content-blog plugin. To create blog posts, add Markdown files or folders to the blog directory. Post dates are automatically extracted from filenames using the format YYYY-MM-DD-title.md (e.g., 2023-12-25-welcome.md) or from an index.md file within a dated folder (e.g., 2023-12-25-welcome/index.md). Using folders for posts is recommended for co-locating images with the content. Blog authors can be managed in the authors.yml file, and posts support tags.

  7. Use useLatest to avoid stale state in asynchronous callbacks

    The useLatest hook from @lad-tech/mobydick-utils returns a ref that always holds the most recent value of the provided state or prop. This is specifically useful for accessing current values inside asynchronous callbacks (like setTimeout or API calls) where a standard state variable would be captured as a stale value from the time the callback was created.
    import { useLatest } from "@lad-tech/mobydick-utils";
import { Button, Text, View } from "@lad-tech/mobydick-core";
import { Alert } from "react-native";
import React from "react";

const Demo = () => {
  const [count, setCount] = React.useState(0);
  // latestCount.current will always be the most recent value of count
  const latestCount = useLatest(count);

  const handleAlertClick = () => {
    setTimeout(() => {
      // Accesses the value at the time the alert triggers, not when the button was clicked
      Alert.alert(`Latest count value: ${latestCount.current}`);
    }, 3000);
  }

  return (
    <View>
      <Text>You clicked {count} times</Text>
      <Button onPress={() => setCount(count + 1)}>Click me</Button>
      <Button onPress={handleAlertClick}>Show alert</Button>
    </View>
  );
};

  8. Install @lad-tech/mobydick-drag-and-drop

    @lad-tech/mobydick-drag-and-drop provides styled Drag and Drop components. It depends on @lad-tech/mobydick-core, react-native-reanimated, and react-native-gesture-handler.
    npm install @lad-tech/mobydick-core react-native-reanimated react-native-gesture-handler @lad-tech/mobydick-drag-and-drop

  9. Create and organize blog posts in Docusaurus

    Docusaurus blogging features are powered by the @docusaurus/plugin-content-blog plugin. To create blog posts, add Markdown files or folders to the blog directory. To co-locate images with a post, use a folder structure. The blog post date is automatically extracted from filenames using the format YYYY-MM-DD-title.md or by placing an index.md inside a folder named YYYY-MM-DD-title.
    # Example filename for date extraction
2023-12-25-welcome.md

# Example folder structure for co-locating images
2023-12-25-welcome/
├── index.md
└── image.png

  10. Use the InputField component for form inputs

    The InputField component is a reusable input field for forms. It supports different visual states via the type prop (using IInputsTypes), allows for titles and subtitles, and can be configured as a multiline text area or a secure text entry field. It inherits all standard React Native TextInput props.
    import { IInputsTypes, InputField } from '@lad-tech/mobydick-core';

const MyForm = () => {
  return (
    <View>
      {/* Standard required input */}
      <InputField
        type={IInputsTypes.default}
        title={'Login'}
        placeholder={'login'}
        required={true}
      />

      {/* Password input with a toggleable visibility icon */}
      <InputField
        type={IInputsTypes.valid}
        title={'Password'}
        placeholder={'password'}
        secureTextEntry={true}
        rightIcon={<SimpleIcon name="icon-hide" />}
        required={true}
      />

      {/* Error state input */}
      <InputField
        type={IInputsTypes.wrong}
        title={'Title'}
        subtitle={'Error text'}
      />

      {/* Disabled input */}
      <InputField
        type={IInputsTypes.disabled}
        title={'Disabled field'}
        disabled={true}
        subtitle={'Subtitle'}
      />

      {/* Multiline text area */}
      <InputField
        type={IInputsTypes.default}
        title={'About:'}
        placeholder={'Write something'}
        multiline={true}
        onChangeText={(text) => console.log(text)}
      />
    </View>
  );
};

  12. Manage popups using the usePopup hook

    The usePopup hook from @lad-tech/mobydick-core allows you to control the visibility of a specific popup component. It returns a set of controller functions (open, close, and closeAll) that can be used to trigger the popup's lifecycle.
    import { usePopup } from '@lad-tech/mobydick-core';

const CustomPopup = () => {
  return <div>Popup Content</div>;
};

const App = () => {
  const { open, close, closeAll } = usePopup(CustomPopup);
  
  return (
    <button onClick={() => open({ /* params */ })}>Open Popup</button>
  );
};