Description:

- This package is all about some predefined components, which we can use in any "React-Native" application to design and render the SLD Diagram, in a very simple manner
- This package was developed using "Typescript" language and "SVG.js" Library based upon "react-native-svg" package

** Note: Before going for installation make sure you have installed all the dependent packages **

Package Details:

Package Name: sld-react-components
Version: 1.0.5
Author: Fluentgrid
License: Proprietory

Dependencies:

react: "^18.2.0"
react-native: "^0.73.5"
react-native-svg: "^15.0.0"

Installation:

** Note: Before going for installation make sure you have installed all the dependent packages **

Open your command prompt and type "npm install sld-react-components" or "npm i sld-react-components" 

Verify:

Open your "node_module" folder and check "sld-react-components" is present or not

Steps To Use In The Application:

Step 1:
    Import the component along with the package

Step 2:
    - Use the component similar to other react-component by giving the value in the parameter
    - Parameter is nothing but the "index","x1","x2","y1","y2". Give the appropriate value to the paameter  according to your use case

    - Here is the sample code for your reference:

        import { StyleSheet, View,  } from 'react-native';
        import { Substation, DTR, SVGLine, Pole, Ptr } from 'sld-react-components/components';
        import Svg  from 'react-native-svg';

        export default function App() {
            return (
                <View style={styles.container}>
                    <Svg height="1200" width="1100">
                        <Substation index={1} xPosition1={100} xPosition2={0} yPosition1={200} yPosition2={0} />

                        <SVGLine xPosition1={150} xPosition2={1000} yPosition1={225} yPosition2={225} />

                        <DTR index={1} xPosition1={210} xPosition2={0} yPosition1={225} yPosition2={0} />
                        <DTR index={1} xPosition1={300} xPosition2={0} yPosition1={225} yPosition2={0} />

                        <Pole index={1} xPosition={400} yPosition={225} />
                        <SVGLine xPosition1={400} xPosition2={400} yPosition1={190} yPosition2={215} />
                        <DTR index={1} xPosition1={380} xPosition2={0} yPosition1={160} yPosition2={0} />

                        <DTR index={1} xPosition1={490} xPosition2={0} yPosition1={225} yPosition2={0} />
                        <DTR index={1} xPosition1={580} xPosition2={0} yPosition1={225} yPosition2={0} />

                        <Pole index={1} xPosition={680} yPosition={225} />
                        <SVGLine xPosition1={680} xPosition2={680} yPosition1={190} yPosition2={215} />
                        <DTR index={1} xPosition1={660} xPosition2={0} yPosition1={160} yPosition2={0} />

                        <DTR index={1} xPosition1={750} xPosition2={0} yPosition1={225} yPosition2={0} />
                        <DTR index={1} xPosition1={850} xPosition2={0} yPosition1={225} yPosition2={0} />

                    </Svg>
                </View>
            );
        }

        const styles = StyleSheet.create({
            container: {
                flex: 1,
                backgroundColor: '#fff',
                alignItems: 'center',
                justifyContent: 'center',
            },
        });
    

    ** The above code you can paste in your "App.tsx" to print the sample SLD diagram using some componnts of this package ** 

Step 3:
    Run your application