diff --git a/package-lock.json b/package-lock.json index 033d707f..a29b561a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "react-json-skeleton-loader", - "version": "0.0.6", + "version": "0.0.7", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index 0522d2b4..13b1b842 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-json-skeleton-loader", - "version": "0.0.6", + "version": "0.0.7", "private": false, "main": "dist/index.js", "types": "dist/index.d.ts", diff --git a/src/JsonSkeletonLoader.tsx b/src/JsonSkeletonLoader.tsx index fd386ae1..e4cb86de 100644 --- a/src/JsonSkeletonLoader.tsx +++ b/src/JsonSkeletonLoader.tsx @@ -64,7 +64,10 @@ const JsonSkeletonLoader: React.FC = (props: UserPropsDataTyp } // item의 요소들 중에 "brink" 가 존재할 경우 if (InitialValue.includes("blank")) { - return ; + return ; } // title + text:x 와같은 형식이 존재할 경우 + 를 제외하고 title 과 text 요소가 생성됨 => text 같은경우에는 뒤으 Number와같은 수의 요소가 생성됨 return InitialValue @@ -155,7 +158,6 @@ const S = { //skeleton 전체를 감싸는 스타일 컴포넌트 Total: styled.div` display: flex; - max-width: 700px; margin: 0 auto; `, //skeleton text 와 title 을 감싸는 스타일 컴포넌트 @@ -163,28 +165,25 @@ const S = { display: flex; flex-wrap: wrap; align-items: center; - max-width: 700px; margin: 0 -10px; /* animaition css 작업 */ &.own{ flex-grow: 0; margin: 0 10px; - max-width: 700px; margin-bottom: -5px; } &.two{ padding: 20px 0px; flex-grow: 1; margin: 0 10px; - max-width: 700px; margin-bottom: -5px; align-content: center; } `, - // skeleton brink 의 스타일 컴포넌트 + // skeleton blank 의 스타일 컴포넌트 Blank: styled.div` - width: 100px; - height: 100px; + width:${({ blankWidth }) => blankWidth}; + height:${({ blankHeight }) => blankHeight}; `, // skeleton box 의 스타일 컴포넌트 Box: styled.div `