@inline-svg-unique-id/react - npm Package Compare versions

Comparing version 1.1.0 to 1.2.0

package.json

 {
   "name": "@inline-svg-unique-id/react",
-  "version": "1.1.0",
-  "description": "React unique inline SVG components ID generator utils",
+  "version": "1.2.0",
+  "description": "React API unique inline SVG components ID generator",
   "author": "Laurynas Aleksiūnas <[e-mail]>",
-  "homepage": "https://github.com/laleksiunas/inline-svg-unique-id/packages/react-inline-svg-unique-id",
+  "homepage": "https://github.com/laleksiunas/inline-svg-unique-id/",
   "license": "MIT",
@@ -11,3 +11,3 @@ "main": "lib/index.js",
     "lib": "lib",
-    "test": "__tests__"
+    "test": "./src/__tests__"
   },
@@ -41,3 +41,3 @@ "files": [
   },
-  "gitHead": "3d97c0dcbe12b1359fcb4778edcce498440b75a0"
+  "gitHead": "c17da3a4b250324a558889b722b018273d714eca"
 }

README.md

@@ -1,11 +0,66 @@
-# `react`
+# `@inline-svg-unique-id/react`
 
-> TODO: description
+### Installation
 
-## Usage
+_npm install @inline-svg-unique-id/react_\
+_npm install --save-dev babel-plugin-react-inline-svg-unique-id_
 
+### Usage
+
+**With SVGR:**
+
+Create .svgrrc.js file in the project root:
+```js
+module.exports = {
+  jsx: {
+    babelConfig: {
+      plugins: ['react-inline-svg-unique-id']
+    }
+  }
+};
 ```
-const react = require('react');
+For more information refer to SVGR transforms [documentation](https://react-svgr.com/docs/custom-transformations/).
 
-// TODO: DEMONSTRATE API
+**With SSR:**
+
+Wrap your application in the generation context provider:
+
+```jsx
+import { Provider as UniqueSvgIdProvider } from '@inline-svg-unique-id/react';
+
+const YourApp = () => (
+  <UniqueIdGeneratorProvider>
+    ...your app stuff...
+  </UniqueIdGeneratorProvider>
+);
 ```
+
+**Customizing generated ID prefix:**
+
+Wrap your application in the generation context provider and specify _idPrefix_ property. **Note:** Prefix property
+is evaluated once and will not change during sequential rerenders.
+
+```jsx
+import { Provider as UniqueSvgIdProvider } from '@inline-svg-unique-id/react';
+
+const YourApp = () => (
+  <UniqueIdGeneratorProvider idPrefix="custom-prefix">
+    ...your app stuff...
+  </UniqueIdGeneratorProvider>
+);
+```
+
+It is also possible to nest providers and have different prefixes for separate branches.
+
+```jsx
+import { Provider as UniqueSvgIdProvider } from '@inline-svg-unique-id/react';
+
+const YourApp = () => (
+  <UniqueIdGeneratorProvider idPrefix="id">
+    <UniqueIdGeneratorProvider idPrefix="other-id">
+      // prefix is "other-id"
+    </UniqueIdGeneratorProvider>
+    // prefix is "id"
+  </UniqueIdGeneratorProvider>
+);
+```

Fixed alerts

No website

Quality

Package does not have a website.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

9036

19.52%

Number of low quality alerts

0

-100%

Number of lines in readme file

67

458.33%

No dependency changes