React Template (retmpl)
A React library for creating components from specific template easily
Installation
with NPM
npm i retmpl --save
with YARN
yarn add retmpl
Features
- Highly customizable (Web/Native)
- Support react-content-loader templates
- Lightweight: ~2KB
- Support responsive UI
- Fully Typescript supported
Live demo
React JS
https://codesandbox.io/s/retmpl-demo-xpyr2h
React Native
https://snack.expo.dev/@linq2js/retmpl-expo-demo
Usages
Simple article loading indicator
createTemplateBuilder function retrieves template definition and return a template builder
import { createTemplateBuilder } from "retmpl";
const template = createTemplateBuilder({
// define line template
line: (
<div
style={{
height: 10,
marginBottom: 5,
backgroundColor: "silver",
borderRadius: 10,
}}
/>
),
});
// show 5 lines
const ArticleLoading = () => template({ line: 5 });
function App() {
return (
<div className="App">
<ArticleLoading />
</div>
);
}
Using shape builder
Retmpl provides shape builder for creating template faster. createShapeTemplate function retrieves defaultShapeProps (optional) of the shape and shape type (optional, div by default). You can use React Native's View component instead of div
const template = createTemplateBuilder({
// a simple shape which can contain other shape
box: createShapeTemplate(),
// a circle shape
circle: createShapeTemplate({
rounded: true,
w: 80,
h: 80,
color: "silver",
}),
// a reactangle shape
rect: createShapeTemplate({
rounded: 8,
color: "silver",
}),
// a line
line: createShapeTemplate({
rounded: true,
color: "silver",
}),
});
const ArticleLoading = () =>
template({
// create a box contains circle and lines
box: {
// flex direction row
row: true,
gap: 20,
// align items
items: "center",
children: {
// create a circle
circle: {},
// create a box which contains lines
box: {
// flex direction column
col: true,
// flex shrink, row = 1
flex: 1,
gap: 12,
children: {
line: [
// number of lines
3,
// a line props callback, this func will be called when creating a line
() => ({
h: 12,
// random right position
r: Math.random() * 20 + "%",
}),
],
},
},
},
},
});