diff --git a/index.js b/index.js new file mode 100644 index 0000000..860abac --- /dev/null +++ b/index.js @@ -0,0 +1,28 @@ +function getImageChilds(parent, options) { + console.log(options) + for (let child in parent.children) { + if ( + parent.children[child].children && + parent.children[child].children.length > 0 + ) { + getImageChilds(parent.children[child], options); + } + + if (parent.children[child].type === "image") { + const data = (parent.children[child].data = {}); + + const props = (data.hProperties = {}); + props.width = options.width ? options.width : "100%"; + } + } + } + + function imageSize(options={}) { + return (node) => { + for (let child in node.children) { + getImageChilds(node.children[child], options); + } + }; + } + + module.exports = imageSize \ No newline at end of file diff --git a/package.json b/package.json new file mode 100644 index 0000000..d6d7312 --- /dev/null +++ b/package.json @@ -0,0 +1,15 @@ +{ + "name": "fs-imagesize", + "version": "0.1.0", + "description": "Set images size with react-markdown", + "main": "index.js", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "keywords": [ + "react-markdown", + "remark" + ], + "author": "Florian Heuberger", + "license": "MIT" +} diff --git a/readme.md b/readme.md new file mode 100644 index 0000000..484c9a6 --- /dev/null +++ b/readme.md @@ -0,0 +1,22 @@ +# react-markdown plugin to set images size. +### A simple to use plugin to set `images` width property. +Basically, `images` are displayed in their full size when you use [react-markdown](https://github.com/remarkjs/react-markdown). This can cause them to overlap their parent element or to be displayed too small. +With this plugin the `width` property can be set very easily. +## Install +``` +npm install fs-imagesize +``` +## Simple to use +```js +import React from "react"; +import ReactMarkdown from "react-markdown"; +import imageSize from "fs-imagesize"; + +function MyComponent(props) { + return ( + + ![Image](https://anyImageUrl.png) + ) +} +``` +The `width` property can be set to any pixel/percent size. If it not set the default value is **100%**. \ No newline at end of file