@remixify/native v0.1.1
Remixify
Remixify is a library for creating React Native components.
It is inspired by the Remix, but also has its own unique features.
This library makes it easier to manage state, handle errors and create layouts.
Installation
Yarn
yarn add @remixify/native
npm
npm install @remixify/native
Usage
In a file write a React Native component with export default
and also define the optional loader
, Layout
, and ErrorBoundary
with named export
as show the example.
The component uses useLoaderData from @remixify/native to fetch data from the loader function and the refetch function to fetch the data again.
// Component.tsx
import React from 'react'
import { View, Text, TouchableOpacity } from 'react-native'
import { useLoaderData } from '@remixify/native'
export async function loader({ params }) {
await new Promise(resolve => setTimeout(resolve, 1000))
return {
message: 'Hello World!',
}
}
export function Layout({ children }) {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
{children}
</View>
)
}
export function ErrorBoundary() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Oops!</Text>
</View>
)
}
export default function Component() {
const { data, isLoading, refetch } = useLoaderData<typeof loader>()
if (isLoading) {
return <Text>Loading...</Text>
}
return (
<>
<Text>{data.message}</Text>
<TouchableOpacity onPress={refetch}>
<Text>Load</Text>
</TouchableOpacity>
</>
)
}
In a second file, index.ts, import everything from the first file and use it as shown in the example:
// index.ts
import remixify from '@remixify/native'
import * as Component from './Component'
export default remixify(Component)
In this file, remixify is imported from @remixify/native and is used to wrap the imported Component to create a remixed component with the defined loader, Layout, and ErrorBoundary.
If you don't want to create this configuration file every time you create a component with remixify, you can try or contribute to the development of our @remixify/babel-plugin.
Note that @remixify/babel-plugin
is in the early stages of development and its use is not yet recommended for production.
Component API
The following are optional functionalities that can be defined as desired by the user when using the remixify library. These functionalities are designed to allow for greater flexibility in customizing the behavior of the created components. Users can choose which functionalities to implement based on their specific needs and preferences.
ErrorBoundary
The ErrorBoundary
function needs to be exported and it should return a React component. This component will be called every time there is an error in the component wrapped by the remixify
function.
export function ErrorBoundary({ error }) {
return (
<View
style={{
backgroundColor: 'red',
paddingHorizontal: 8,
paddingVertical: 4,
borderRadius: 4,
}}
>
<Text style={{ color: 'white' }}>Oops an error!</Text>
<Text style={{ color: 'white' }}>{error.message}</Text>
</View>
)
}
Layout
The Layout
should be an exported function that returns a React component. It should accept an object with a children
property as an argument, and this children
property should be used in the layout to render the component created with the remixify
library. The Layout component is the component that will always be displayed, regardless of the changes made to the component created with the remixify
.
export function Layout({ children }) {
return (
<View
style={{
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'red',
}}
>
{children}
</View>
)
}
loader
The loader
must be an exported asynchronous function that returns a value. The value can be anything, such as the response of an API call.
The data returned by the loader can be accessed in the component created by remixify using a hook called useLoaderData
. This hook returns an object with the value returned by the loader in an attribute called data, an attribute called isLoading indicating if the Promise of the loader has been resolved, and an attribute called error that will store any errors that occurred in the loader.
The loader also receives an object with an attribute called params, which is defined in another function called useLoaderParams.
export async function loader({ params }) {
const todos = await getTodos()
return {
todos,
}
}
// inside the component
const { data, isLoading, refetch } = useLoaderData<typeof loader>()
if (isLoading) {
return <Text>Loading...</Text>
}
console.log(data.todos)
useLoaderParams
The useLoaderParams
needs to be exported and return a value. The value returned by this function will be the data received in the params of the loader. This function was created to allow access to component hooks data in the loader. The user can return anything in this function and access any hook by it, such as a parameter received by the useParams from react-navigation.
export function useLoaderParams() {
const params = useParams()
return {
todoId: params.todoId,
}
}
// In the loader, it can be accessed like this:
export async function loader({ params }) {
const todo = await getTodo(params.todoId)
return {
todo,
}
}
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago