With the react-native-h5mag framework, you can easily access H5mag public API
React-native-h5mag
Welcome to the react-native-h5mag framework readme.
With the react-native-h5mag framework, you can easily access H5mag public API. It is a flexible framework that developers can use in new and existing React Native projects.
React-native-h5mag supports both iOS and Android and has been tested on the following OS versions:
OS | Versions |
---|---|
iOS | 12.4, 15.0, 15.4 |
Android | 7.0 – 12.0 |
Installation
You need NPM to install the H5mag framework. For installation use this command:
npm i @h5mag/react-native-h5mag
Usage
In order to use the API, you will need to set the API key first. Here is an example:
// App.js
import H5mag from 'react-native-h5mag';
H5mag.setApiKey('h5_public_Fn30x...Wvay2g');
API
After setting the API key you can use the functions below.
getProjectAndEditions
async getProjectAndEditions() : Promise<any>
Retrieves one project.
Parameter | Type | Description |
---|---|---|
projectDomain | string | Your project domain (e.g. name of your project) |
options | object | Extra options — See options table below |
Options object:
Parameter | Type | Description |
---|---|---|
apiKey | string | Manually set/override API key |
sort | boolean | Sort editions by date |
Example:
const getProjectData = async () => {
try {
await getProjectAndEditions(projectDomain, { sort: true }).then((result) => {
// Do something with the project data...
});
} catch (error) {
console.error(error);
}
};
getProjectsList
async getProjectsList() : Promise<any>
Retrieves all projects.
Parameter | Type | Description |
---|---|---|
options | object | Extra options — See options table below |
Options object:
Parameter | Type | Description |
---|---|---|
apiKey | string | Manually set/override API key |
filterByHasLatestEdition | boolean | Only retrieves projects with at least one published edition |
Example:
const getProjectsData = async () => {
try {
const response = await getProjectsList({ filterByHasLatestEdition: true });
// Do something with the projects data...
} catch (error) {
console.error(error);
}
};
downloadEdition
downloadEdition() : Promise<any>
Downloads the specified editon.
Parameter | Type | Description |
---|---|---|
targetPath | string | Path to folder location of edition |
charset | string | Character set to use (e.g. UTF-8) |
editionPath | string | Path of edition (e.g. /editionName) |
projectDomain | string | Domain name of project (e.g. testproject) |
options | object | Extra options — See options table below |
Options object:
Parameter | Type | Description |
---|---|---|
apiKey | string | Manually set/override API key |
Example:
// You could get the **editionPath** and **projectDomain** through props.
const targetPath = (Platform.OS === 'android' ? DocumentDirectoryPath : MainBundlePath) + '/' + projectDomain + edition.path;
const charset = 'UTF-8';
const startEditionDownload = () => {
downloadEdition(targetPath, charset, editionPath, projectDomain).then((result) => {
if (result === 'downloaded') {
// Do something after the edition has been downloaded....
}
}).catch((err) => {
console.log(err);
});
};
deleteEdition
deleteEdition() : Promise<any>
Deletes the specified folder and all files in it.
Parameter | Type | Description |
---|---|---|
targetPath | string | Path to folder location of edition |
Example:
deleteEdition(targetPath).then((result) => {
if (result === 'deleted') {
// Do something after the deletion...
}
});
readEditionOffline
readEditionOffline() : Promise<any>
Starts a local server for offline edition reading.
Parameter | Type | Description |
---|---|---|
osPath | string | Path of the root app folder |
targetPath | string | Path to folder location of edition |
Example:
const osPath = Platform.OS === 'android' ? DocumentDirectoryPath : MainBundlePath;
readEditionOffline(osPath, targetPath).then((result) => {
if (result === 'success') {
// Server is ready!
// Update a state...
}
});
if (readyToReadEdition) {
return (<EditionReader targetPath={targetPath} />);
}
Components
EditionReader
<EditionReader targetPath={...} />
The EditionReader component uses a Webview wrapped inside a SafeAreaView to load the selected edition.
Building react-native-h5mag
Ensure you have npm installed
mpm install -g bob
npm pack
License
MIT