placeholder-image-box
v1.0.2
Published
A simple React Native component for displaying a box with customizable dimensions and background color.
Downloads
5
Maintainers
Readme
placeholder-image-box
A simple React Native component for displaying a box with customizable dimensions and background color. This can be useful as a placeholder or a simple styled box in your React Native applications.
Installation
Install the package via npm:
npm install placeholder-image-box
Usage
Here's how you can use the BoxImage component in your React Native project:
import React from "react";
import { View, StyleSheet } from "react-native";
import BoxImage from "placeholder-image-box";
const App = () => {
return (
<View style={styles.container}>
{/* Box with specified background color */}
<BoxImage width={200} height={150} backgroundColor="lightblue" />
{/* Box with default gray background color */}
<BoxImage width={200} height={150} />
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
alignItems: "center",
},
});
export default App;
Props
The BoxImage component accepts the following props:
width (number)
: The width of the box. Default is 100.height (number)
: The height of the box. Default is 100.backgroundColor (string)
: The background color of the box. Default is "gray".
Example
import React from "react";
import { View, StyleSheet } from "react-native";
import BoxImage from "placeholder-image-box";
const Example = () => {
return (
<View style={styles.container}>
<BoxImage width={100} height={100} backgroundColor="red" />
<BoxImage width={150} height={150} backgroundColor="green" />
<BoxImage width={200} height={200} backgroundColor="blue" />
<BoxImage width={250} height={250} />
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
alignItems: "center",
},
});
export default Example;
Contributing
Contributions are welcome! Please open an issue or submit a pull request for any bugs or feature requests.
License
This project is licensed under the MIT License. See the LICENSE file for more details.
Issues
If you encounter any issues, please report them here.
How to Use the README.md
1. **Create a `README.md` File**:
Create a `README.md` file in your `placeholder-image-box` directory and copy the above content into it.
2. **Update URLs**:
Replace `yourusername` with your actual GitHub username in the GitHub repository and issues links.
3. **Commit and Push**:
Commit the `README.md` file to your repository:
```bash
git add README.md
git commit -m "Add README file"
git push origin main